260 likes | 427 Views
HTML Hypertext Markup Language. The HTLM History HMTL Basics. Terms To Know. World Wide Web (Web):The part of the Internet that supports multimedia and consists of a collection of link documents
E N D
HTMLHypertext Markup Language The HTLM History HMTL Basics
Terms To Know • World Wide Web (Web):The part of the Internet that supports multimedia and consists of a collection of link documents • HTTP (Hypertext Transfer Protocol): set of rules for exchanging text, graphic, sound, video, and other multimedia files • Web Site: a related collection of web pages that is created and maintained by someone
Terms To Know • Web server (Host): a computer that stores web pages and sends (serves) requested web pages • Publishing: copying web pages to a Web server so anyone who has Internet access can view it.
Web Browser • Program that interprets and displays web pages and enables you to view and interact with a web page Google Firefox Flock Internet Explorer Opera Safari (Mac)
Terms To Know • URL (Uniform Resource Locator): the address of a document or other file accessible on the Internet • http://www.scite.com/html3e/index.htm • Hyperlink (link): an element used to connect one web page to another web page on same or different server
HTMLHypertext Markup Language • The authoring language used to create documents on the World Wide Web. • Tags or Markups: use of special instructions to define the structure and layout of the web document • Platform independent: you can create an HTML files on one type of computer and then use a browser on another type of computer to view that file
HTML History • Tim Berners-Lee & Robert Calliau 1989 • Developed a collection of tags that described how a document should look when viewed in a browser • Made it possible to create hyperlink s • Tim Berners-Lee founded World Wide Web Consortium 1994 • Encourages universality of HTML • Promotes an open forum for discussion among Web Designers • Seeks to promote standards for the evolution of the Web to help make web accessible to everyone • Regarded as the de facto organization to govern HTML
HTML Versions • DHTML: combination HTML, cascading style sheets, and scripting language. Creates interactive, animated web pages • XML: uses tags to describe the structure and content of a document, not the format • XHTML: reformation of HTML so it conforms to XML rules. Combines the benefits of the display features of HTML and the stricter coding standards required by XML. • Handheld devices and mobile phones can only display XHTML code
Creating HTML Documents • Need an HTML Text Editor • Type the code directly in the document • Notepad or Word • Save document with an extension .htm or .html • Software Application Software: • Dreamweaver, Front Page, Sausage Software HotDog • WYSIWYG (What You See Is What You Get)
Elements of A Web Page Title Text Links Image Navigation Bar Body Image Links Background Heading 1 Paragraph Heading 2
Notepad Text Editor • Click Start button on Taskbar • Click Programs > Accessories > Notepad • Save files with an .html extension • index .html • Filenames: can contain letters, numbers, and underscores • Cannot contain: : * ? Or spaces • To open an html file later • File > Open > click arrow to the right of Type > choose All > click the file you want to open
HTML Tags <DOCTYPE>: begins the web page in XHTML • Indicates the version and type of HTML used; includes a URL reference to a DTD at the W3C site. • Strict: prohibits use of depreciated tags • Deprecated tags: tags that the W3C has earmarked for eventual removal; replaced with newer, more function tags. • Transitional: allows the use of deprecated tags • Framseset: used to support frames on the Web page; allows use of deprecated tags
HTML Tags <html> </html> • Indicates the start and end of an HTML document <head> </head> • Indicates the start and end of a section of the document used for the title, keywords, metatags and other document header information.
HTML Tags <body> </body> • Indicates the start and end of the Web page body <h#> </h#> • Indicates the start and end of the text section called a heading; sizes range from the largest <h1> through smallest <h6>.
HTML Tags <p> </p> • Indicates the start of a new paragraph; inserts a blank line above the new paragraph.
HTML Tags for Lists <ul> </ul> • Indicates the start and end of an unordered list (bulleted list). There are three types of unordered lists: • Type=“square” • Type=“disc” (default) • Type=“circle” <ol> </ol> • Indicates the start and end of an ordered list (numbered list) <li> </li> • Indicates that the item that follows the tag is an item within a list
HTML Tags for Lists continued <dl> </dl> • Indicates the start and end of a definition list • First line or term <dt> </dt> at the left edge; • Next set tags are for the definition <dd> </dd> are indented from the left edge
HTML Tags <hr /> • Inserts a horizontal rule (line) • <hr /> default: line from left margin to right margin • <hr / size=“5”>: Increases the width of the line • <hr / size=“10” noshade>: line width increases and it doesn’t appear shaded (shaded is default)
HTML Tags <br /> • Inserts a line break at the point where the tag appears. Appears as single spacing between lines.
HTML Image Tags Images can be used as the background, to organize, or to clarify information • Types of files used on the Web • GIF (Graphics Interchange Format): clipart • JPG (Joint Photographic Experts Group): photos • PNG (Portable Network Graphics): Fireworks file • Image Tag syntax <imgscr = “file name and type” any attributes />
Image Attributes Tags • Align: controls alignment (bottom, middle, top, left, or right) align=“top” • Alt: allows text to be associated with image alt=“flower pot” • Border: defines the border width border=“5” • Height: defines the height of the image height=“2.5” • Hspace: defines the horizontal space that separates the image from the other text hspace=“15” • vspace: defines the vertical space that separates the image from the other text vspace=“1” • Width: defines the width of the image width=“3”
Colors In Hexadecimal • Predefined colors choices that can reference by name: • Silver, gray, maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta, yellow, cyan • Other colors use a Hexadecimal number combination • Hexadecimal is a base of 16 digits • 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f • Hexadecimal colors use six digits • White = ffffff (all colors) • Black = 000000 (no color) • Background image tag: • bgcolor=“red” • bgcolor=“#fffbc6”
View Web Page Option #1 • Open the browser • File > Open > browse to file > OK Option #2 • Browse to file using My Computer > Open • Multitask: Use Taskbar to switch between text editor and browser • After making changes in the text editor, click Refresh in the browser
Printing Print Web page from the Browser • Click the Print icon Print HTML code in Notepad • File > Print