1 / 54

HTML

HTML. HyperText Markup Language HyperText text containing navigable links to other texts Markup Language

rosie
Download Presentation

HTML

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. HTML • HyperText Markup Language • HyperText • text containing navigable links to other texts • Markup Language • a method of adding information to the text indicating the logical components of a document, or instructions for layout of the text on the page which can be interpreted by some automatic system

  2. HTML Principles • Platform, device, modality independence • hard to achieve in reality • different browser, different rendering • Human-readable text format • independence from an editing application • Standard conformance and evolution

  3. HTML Standard • What tags exist? • How are the tags to be interpreted? • How are the tags related to each other? • How should the client respond to user interaction with the page? • Standard body is the World Wide Web Consortium • www.w3c.org

  4. Versions of the standard • HTML 1.0 • 1993 • never fully standardized • HTML 2.0 • 1994 • HTML 3.2 • 1996 • 3.0 never released • added tables, applets, text flow • HTML 4.0 • 1998 • XHTML 1.0 • current recommendation • makes HTML conformant with XML

  5. HTML versus XHTML HTML (Hypertext Markup Language) is the markup language used to create web pages. An HTML document is read by a web browser, which displays the web page. The most recent version of HTML is 4.01. XHTML (Extensible Hypertext Markup Language) is a stricter, cleaner version of HTML intended for use with automated document processing systems. XHTML is combination of HTML and XML (Extensible Markup Language), which is a more general markup language than HTML.

  6. Browser Versions • Many different browser versions • all support different combinations of HTML features • Current leaders • Firefox • IE 7 and IE 8 • Netscape • way behind • Opera • Safari

  7. Other rendering issues • User’s monitor • size • resolution • color depth • color temperature • User preferences • window size • browser preference settings • images off • Browser capabilities • format-specific plug-ins • Java version

  8. Tools • Text editor • editing HTML files • (no WYSIWYG editors, please) • Web client / browser • viewing files • IE, Firefox, Safari, etc. • Web server • deliver the files to users • students.depaul.edu

  9. Process • Write HTML file • ASCII / text format • extension .html or .htm • Upload to server • public_html directory • Set permissions • Similar with images • .gif and .jpg formats

  10. Terminology • Document content • the parts of the file that the user sees • Tag • HTML codes that control document appearance • Attributes • properties associated with a tag • Entities • specially-coded characters

  11. Tag syntax • Tags are case-insensitive • but all lower case is recommended • XHTML will require it • Tags are enclosed in angle brackets • <html> • Tags typically come in pairs • <title> • </title> • Tags typically enclose document content • <p>some text... </p> • Tags can only be nested • <b> <i> some text... </i> </b> legal • <b> <i> some text... </b> </i> illegal

  12. Attribute syntax • Attributes are name / value pairs included in tags • <body bgcolor=“black”> • Attributes never include document content • may include formatting information • color, size, etc. • HTML attributes do not need to be quoted • But XHTML will require it

  13. Tag types • Document tags • identify the various parts of the document (Head, Body) • Text structure tags • determine the layout of the text (lists, paragraphs) • Style tags • tell the browser how to display the text • Image tags • to incorporate images • Anchor tags • to create hyperlinks

  14. Document tags • <html> … </html> Mark the beginning and end of the html file • <head> … </head> Text in this part of the document is not displayed in the browser’s window. It includes other tags like <title> and <meta> • <title> … </title> Displayed in the browser’s title bar. It is used as the default bookmark description. • <body> … </body> The contents displayed in the browser’s window.

  15. The bare minimum <html> <head> <title> IT 130: The bare minimum </title> </head> <body> Welcome to the Bare Minimum Page for IT 130! </body> </html>

  16. HTML Comments The comment feature provides you with a way to document your HTML files and make notes to yourself or anyone who reads your file. However, these do not show up in the displayed web page. Basic comment examples <!--This is a comment --> <!--------- You can write as much as you like in a comment and they can span multiple lines -------------->

  17. Text structure tags • Headings: <hx> … </hx> for1  x  6The smaller x the larger the text • Paragraph: <p> … </p>A blank line is inserted before the paragraph. • Line Break: <br> • Ordered lists: <ol> … </ol> • Unordered lists: <ul> … </ul>

  18. The “Heading” tag • An example of a ‘structure’ tag • Headings: <h1> … </h1>  boldest and largest <h2> … </h2> <h3> … </h3> <h4> … </h4> <h5> … </h5> <h6> …. </h6>  lightest and smallest

  19. Spacing example <html> <head> <title>Spacing example</title> </head> <body> <h1>Important! (This is an H1)</h1> <p>Notice that we have some text in this paragraph.</p> <h3>Spacing test (this is an H3)</h3> <p>Here I am spacing things widely. It does not make a difference. I just left two lines blank, but I am still here! </p> One line<br> Second line<br> <p>Another paragraph!</p> </body> </html> spacing-example.html

  20. Character Entities

  21. Unordered lists • An unordered (or bullet) list uses the tag pair <ul> … </ul> • Each item in the list is preceded by a single list item tag <li> • It produces an indented list with a browser-supplied character in front of it (a small circle or a square) • You can specify the type of symbol used by using the TYPE attribute <ul type=“disc”> <li>item 1 </li> <li>item 2 </li> </ul> Other possible types are:square or circle

  22. Example <html> <head> <title></title> </head> <body> <h1>Here is an example of a list</h1> <ul> <li>First item </li> <li>Second item </li> </ul> <ul type=“square”> <li>Third item </li> <li>Fourth item </li> </ul> </body> </html> • First item • Second item • Third item • Fourth item

  23. Ordered lists • An ordered list uses the tag pair <ol>… </ol> • Each item in the list is preceded by a single list item tag <li> • This also produces an indented list but the items are ordered. • The default is to order by numbers (like this)

  24. Example <html> <head> <title> …. </title> </head> <body> <h1>Here is an example of a ordered list </h1> <ol> <li>First item </li> <li>Second item </li> </ol> </body> </html> • First item • Second item

  25. Nested lists • Both ordered and unordered lists can be nested • This is done by starting a new list before the current list has ended • There is no limit to the number of levels of nesting • Use indenting in the source code to distinguish between each level of nesting

  26. Attributes for ordered lists • TYPE can change the type of numbering used in a list. • TYPE = “I” Uppercase Roman numerals • TYPE = “i” Lowercase Roman numerals • TYPE = “A” Uppercase Latin letters • TYPE = “a” Lowercase Latin letters • START can change where the lists begins the • numbering. • START = “3” Starts from 3 instead of 1 • START = “b” Starts from b instead of a

  27. List example <html> <head><title>HTML List Example</title></head> <body><h1>To do list</h1> <ol type =“A” > <li>Pick up dry cleaning <li>Clean the house <ul> <li>Sweep the floors </li> <li>Take out garbage </li> <li>Clean kitchen </li> </ul> <li>Stop by post office <ul> <li>Get stamps <ul> <li>Overseas airmail </li> <li>Domestic </li> </ul> <li>Mail package </li> </ul> </ol> </body> </html> list-example.html

  28. Other structure tags • definition lists • <dl> • never really caught on • blockquote • <blockquote> • Indents with using a list • supposedly for extended quotations • often used for spacing • preformatted text • <pre></pre> • no HTML formatting performed

  29. Logical style tags Logical style tags describe the text content and let the browser choose the rendering. These are “good” tags. • Emphasis • <em> </em> • usually rendered as italic • Strong • <strong> </strong> • usually rendered as bold • Code • <code> </code> • monospaced font • Others

  30. Display style tags Display style tags that specify the rendering directly. These are “bad” (deprecated) tags. • Italic • <i> </i> • Bold • <b> </b> • Font • <font> </font> • Center • <center> </center> • Underlined • <u> </u> Just because tags work, doesn’t mean that it’s okay to use them. Certain tags have been deprecated which means that they are being phased out of the HTML standard. Later on in the course when we learn about CSS, we will stop using deprecated tags.

  31. Which tags to use An HTML tag or attribute is said to be deprecated if it is the current version of HTML but will be eliminated from future versions of HTML. There are numerous deprecated out there. So though they are still technically part of HTML, their use is discouraged when writing new web pages. In this course we are going to avoid using depracated tags whenever possible. The BEST way to find out which tag to use is via a reliable reference. A great way to start is at: http://www.w3schools.com (Bookmark this web page on your computer).

  32. Style example <html> <head><title>Style example</title></head> <body> <p><center> <font color="red">Red text, centered</font> </center></p> <p align="center"><b>Bold text, centered also</b></p> <p><font color="blue" size="+1" face="Arial,Helvetica,sans-serif"> Blue text, larger, in a sans-serif font </font></p> <p>Preformatted Text:</p> <pre>I can use space however I want: X O X O X O X O O <b><i>X Wins!</i></b> </pre> <p>Back to normal.</p> </body> </html> style-example.html

  33. Horizontal line The tag for creating a horizontal line is <hr />. You can use horizontal lines to improve the appearance of your web page and to delineate sections. There are several available attributes most of which are deprecated. However, we’ll make use of them until we learn to get around them using CSS. W3 Schools on the <hr> tag

  34. Horizontal line Older (deprecated) attributes include: • align specifies the line’s horizontal alignment on the page (center, left, or right) • size specifies the line’s height in pixels or percentage of the screen width • width indicates the line’s width in either pixels or percentage of the screen width • color indicates the line’s color • noshade specifies that the browser display a solid line

  35. Horizontal line styles - DEPRECATED <hr align=“center” size=“12” width=“100%” /> size=12 width=100% <hr align=“center” size=“6” width=“50%” /> size=6 width=50% <hr align=“center” size=“3” width=“25%” /> size=3 width=25% <hr align=“center” size=“1” width=“10%” /> size=1 width=10% Because these attributes are deprected, you should not use them. I am showing you this slide only to give you a sense of the kinds of visual effects that can be achieved. You will see that the same effects can be achieved using CSS.

  36. Quick review of end tags: In old HTML, <hr> was the tag for horizontal lines. No closing tag was needed. In XHTML, <hr> must be written with its closing tag </hr>. But no one wants to write two tags instead of one tag. In XHTML, <hr /> is the shorthand version of <hr></hr>. Similarly, <br /> is the shorthand version of <br></br>.

  37. Anchor tag (Hyperlinks) • <a> … </a> Used to create hyperlinks to • other documents in the same Web site • to different locations in the same document. • to external Web sites • The attribute HREF indicates the destination of the link. • <a href= “url" > Clickable text </a>

  38. Link to external Web pages <a href="http://www.cdm.depaul.edu">CDM Web Site</a> To force a document to appear in a new window, use the target attribute <a href=" http://www.cs.depaul.edu" target="new_window"> CDM Web Site </a> link-example.html

  39. Relative URLs • Full URL • http://maya.cs.depaul.edu/~classes/it130/assign2.html • Can be abbreviated in a link • <a href=“assign2.html"> • The rest of the URL is filled in • from the URL of the current page

  40. Relative paths • What if the destination is not in the same directory as the source • We can use Unix path syntax for navigation • Elements • / • go back up to the very top • foo/ • go down to a child directory named "foo" • .. • go up to the parent directory

  41. public_html hw2.html main.html hw2.jpg file1.html hw Link hw2.htm to main.html: Relative paths “it130” Directory “images” directory Link main.html to hw2.html: <a href=“it130/hw2.html”> <a href=“../main.html”> Link hw2.html to hw2.jpg: <a href=“../images/hw/hw2.jpg”>

  42. Structure • Your local directory structure • where you are writing your web pages • Must match the structure on the server • contents of public_html directory • Otherwise • links will work when you test locally • but not after being uploaded

  43. Mailto hyperlinks • The anchor tag and the HREF attribute can be used • to reference the e-mail protocol. • In general this looks like: • <a href = “mailto:e-mail address” >name</a> • Example: • To make an appointment contact: • <a href = “mailto:mobasher@cs.depaul.edu”>Bamshad Mobasher</A>. link-example2.html

  44. Inserting a Graphic • Images can be displayed in two ways: as inline images or as external images. • an inline image displays directly on the Web page and is displayed when the page is accessed by a user • an inline image can be placed on a separate line in your HTML code, or it can be placed directly within a line of text • inline images should be in one of several file formats. • Most common • GIF (Graphics Interchange Format) • JPEG (Joint Photographic Experts Group) • PNG (Portable Net Graphics)

  45. Inserting a Graphic Continued • an external image is not displayed with the Web page, the browser must have a file viewer, which is a separate program that the browser launches when it encounters an external image file • external images are represented by an icon that a user clicks to view the image • external images are only limited by applications available at the client

  46. Image file formats • GIF (Graphic Interchange Format) • To display clip art containing < 256 colors • To create animated graphics • To use transparent colors • JPG (Joint Photographic Expert Group) • To display photographs • To use images containing >256 colors • To reduce the size of the image through file compression • PNG (Portable Net Graphics) • A replacement for GIF • Compressed • More color depth • transparency

  47. Image tag • Inline image: a picture file that is referenced in the HTML code and is loaded with the HTML file. • <img src ="photo.jpg"> • src attribute • URL • is usually relative • If you want to retrieve an image from a different directory, you can add path information to the file name: <img src=“images/photo.jpg”>

  48. More image tag attributes • HEIGHT: specifies the height of the image in pixels • WIDTH: specifies the width of the image in pixels • BORDER: determines the size of the border • ALT: specifies the text displayed on-screen when the image cannot be loaded • ALIGN: enables text to flow around the image: at the TOP, MIDDLE, or BOTTOM of the image. Also used to flush the image to the RIGHT or LEFT of the screen

  49. Alignment of images – DEPRECATED in favor of CSS… To insert an image: <img src="myImage.gif" /> To right-align an image: <img src="myImage.gif" align="right" /> Note: The align attribute is deprecated. To left-align an image: <img src="myImage.gif" align="left" /> Again, we will NOT be using the align attribute as this has been deprecated in favor of CSS.

  50. Flowing Text • Use the align attribute to make text flow alongside an image: <img src=“cat.jpg” align=“left”> positions the image on the left side of the page and allows text to run down its right side • To center an image, use <p align=“center”><img src=“…”></p>

More Related