1 / 26

HTML Hypertext Markup Language

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

lindsay
Télécharger la présentation

HTML Hypertext Markup Language

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTMLHypertext Markup Language The HTLM History HMTL Basics

  2. 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

  3. 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.

  4. Web Site Types

  5. 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)

  6. 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

  7. 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

  8. 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

  9. 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

  10. HTML vs. XHTML

  11. 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)

  12. Elements of A Web Page Title Text Links Image Navigation Bar Body Image Links Background Heading 1 Paragraph Heading 2

  13. 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

  14. 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

  15. 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.

  16. 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>.

  17. HTML Tags <p> </p> • Indicates the start of a new paragraph; inserts a blank line above the new paragraph.

  18. 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

  19. 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

  20. 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)

  21. HTML Tags <br /> • Inserts a line break at the point where the tag appears. Appears as single spacing between lines.

  22. 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 />

  23. 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”

  24. 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”

  25. 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

  26. Printing Print Web page from the Browser • Click the Print icon Print HTML code in Notepad • File > Print

More Related