HTML Hyper Text Markup Language Hyper Text l
- Slides: 54
HTML ¢ ¢ Hyper. Text Markup Language Hyper. Text l ¢ Markup Language l 1 text containing navigable links to other texts 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
HTML Principles ¢ Platform, device, modality independence hard to achieve in reality l different browser, different rendering l ¢ Human-readable text format l ¢ 2 independence from an editing application Standard conformance and evolution
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 l 3 www. w 3 c. org
Versions of the standard ¢ HTML 1. 0 l l ¢ HTML 2. 0 l ¢ l l 1998 XHTML 1. 0 l l 4 1996 3. 0 never released added tables, applets, text flow HTML 4. 0 l ¢ 1994 HTML 3. 2 l ¢ 1993 never fully standardized current recommendation makes HTML conformant with XML
HTML versus XHTML (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. 5
Browser Versions ¢ ¢ Many different browser versions l all support different combinations of HTML features Current leaders l Firefox IE 7 and IE 8 l Netscape l • way behind l l 6 Opera Safari
Other rendering issues ¢ ¢ ¢ 7 User’s monitor l size l resolution l color depth l color temperature User preferences l window size l browser preference settings l images off Browser capabilities l format-specific plug-ins l Java version
Tools ¢ Text editor l l ¢ Web client / browser l l ¢ viewing files IE, Firefox, Safari, etc. Web server l l 8 editing HTML files (no WYSIWYG editors, please) deliver the files to users students. depaul. edu
Process ¢ Write HTML file ASCII / text format l extension. html or. htm l ¢ Upload to server public_html directory l Set permissions l ¢ Similar with images l 9 . gif and. jpg formats
Terminology ¢ Document content l ¢ Tag l ¢ properties associated with a tag Entities l 10 HTML codes that control document appearance Attributes l ¢ the parts of the file that the user sees specially-coded characters
Tag syntax ¢ ¢ ¢ 11 Tags are case-insensitive l but all lower case is recommended l XHTML will require it Tags are enclosed in angle brackets l <html> Tags typically come in pairs l <title> l </title> Tags typically enclose document content l <p>some text. . . </p> Tags can only be nested l <b> <i> some text. . . </i> </b> legal l <b> <i> some text. . . </b> </i> illegal
Attribute syntax ¢ Attributes are name / value pairs included in tags l ¢ Attributes never include document content l l ¢ may include formatting information color, size, etc. HTML attributes do not need to be quoted l 12 <body bgcolor=“black”> But XHTML will require it
Tag types ¢ ¢ ¢ 13 Document tags l identify the various parts of the document (Head, Body) Text structure tags l determine the layout of the text (lists, paragraphs) Style tags l tell the browser how to display the text Image tags l to incorporate images Anchor tags l to create hyperlinks
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. 14
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> 15
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 -------> 16
Text structure tags ¢ Headings: <hx> … </hx> for 1 x 6 The smaller x the larger the text ¢ Paragraph: <p> … </p> A blank line is inserted before the paragraph. Line Break: ¢ Ordered lists: <ol> … </ol> ¢ Unordered lists: <ul> … </ul> ¢ 17
The “Heading” tag q q 18 An example of a ‘structure’ tag Headings: <h 1> … </h 1> boldest and largest <h 2> … </h 2> <h 3> … </h 3> <h 4> … </h 4> <h 5> … </h 5> <h 6> …. </h 6> lightest and smallest
Spacing example <html> <head> <title>Spacing example</title> </head> <body> <h 1>Important! (This is an H 1)</h 1> <p>Notice that we have some text in this paragraph. </p> <h 3>Spacing test (this is an H 3)</h 3> <p>Here I am spacing things It does not make a difference. spacing-example. html widely. I just left two lines blank, but I am still here! </p> One line Second line <p>Another paragraph!</p> </body> </html>
Character Entities Code name Code Symbol < < < > > > & & & © © © ® ® ®     Non-breaking space @ @ · ● 20
Unordered lists ¢ An unordered (or bullet) list uses the tag pair <ul> … ¢ Each item in the list is preceded by a single list item tag <li> </ul> l l 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> 21 Other possible types are: square or circle
Example <html> <head> <title></title> </head> <body> <h 1>Here is an example of a list</h 1> <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
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> 1. 2. This also produces an indented list but the items are ordered. The default is to order by numbers (like this) 23
Example <html> <head> <title> …. </title> </head> <body> <h 1>Here is an example of a ordered list </h 1> <ol> <li>First item </li> <li>Second item </li> </ol> </body> </html> 1. First item 2. Second item
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 ¢ 25
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 26
List example <html> <head><title>HTML List Example</title></head> <body><h 1>To do list</h 1> <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
Other structure tags ¢ ¢ ¢ 28 definition lists l <dl> l never really caught on blockquote l <blockquote> l Indents with using a list l supposedly for extended quotations l often used for spacing preformatted text l <pre></pre> l no HTML formatting performed
Logical style tags describe the text content and let the browser choose the rendering. These are “good” tags. ¢ Emphasis l l ¢ Strong l l ¢ l 29 <strong> </strong> usually rendered as bold Code l ¢ <em> </em> usually rendered as italic <code> </code> monospaced font Others
Display style tags that specify the rendering directly. These are “bad” (deprecated) tags. ¢ Italic l <i> </i> ¢ Bold l <b> </b> ¢ Font l <font> </font> ¢ Center l <center> </center> ¢ Underlined l <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. 30
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. w 3 schools. com (Bookmark this web page on your computer). 31
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 O <b><i>X Wins!</i></b> </pre> <p>Back to normal. </p> </body> </html> style-example. html
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. 33
Horizontal line Older (deprecated) attributes include: l l l 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 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 34
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. 35
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, is the shorthand version of </br>. 36
Anchor tag (Hyperlinks) ¢ <a> … </a> Used to create hyperlinks to l l l ¢ ¢ 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> 37
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 38
Relative URLs ¢ Full URL l ¢ Can be abbreviated in a link l ¢ http: //maya. cs. depaul. edu/~classes/it 130/assign 2. html <a href=“assign 2. html"> The rest of the URL is filled in l 39 from the URL of the current page
Relative paths ¢ What if the destination is not in the same directory as the source l ¢ We can use Unix path syntax for navigation Elements l / • go back up to the very top l foo/ • go down to a child directory named "foo" l . . • go up to the parent directory 40
Relative paths public_html main. html “images” directory hw file 1. html “it 130” Directory hw 2. html hw 2. jpg Link main. html to hw 2. html: <a href=“it 130/hw 2. html”> Link hw 2. htm to main. html: <a href=“. . /main. html”> Link hw 2. html to hw 2. jpg: <a href=“. . /images/hw/hw 2. jpg”>
Structure ¢ Your local directory structure l ¢ Must match the structure on the server l ¢ where you are writing your web pages contents of public_html directory Otherwise links will work when you test locally l but not after being uploaded l 42
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-example 2. html 43
Inserting a Graphic ¢ Images can be displayed in two ways: as inline images or as external images. l l 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) 44
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 l external images are represented by an icon that a user clicks to view the image l external images are only limited by applications available at the client l 45
Image file formats ¢ GIF (Graphic Interchange Format) l l l ¢ JPG (Joint Photographic Expert Group) l l l ¢ To display clip art containing < 256 colors To create animated graphics To use transparent colors To display photographs To use images containing >256 colors To reduce the size of the image through file compression PNG (Portable Net Graphics) l l A replacement for GIF Compressed More color depth transparency 46
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 l l ¢ 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”> 47
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 48
Alignment of images – DEPRECATED in favor of CSS… To insert an image: <img src="my. Image. gif" /> To right-align an image: <img src="my. Image. gif" align="right" /> Note: The align attribute is deprecated. To left-align an image: <img src="my. Image. gif" align="left" /> Again, we will NOT be using the align attribute as this has been deprecated in favor of CSS. 49
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> 50
Image example <html> <head></head> <body> <h 1 align="center"> Martin Luther King, Jr. </h 1> <p> <img src="mlk. gif" align="right“ width=“ 336” height=“ 400”> I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be selfevident: that all men are created equal. " …… I have a dream today. </p> <p> I have a dream that one day the state of Alabama, whose governor's lips are presently dripping with the words of interposition and nullification, will be transformed into a …. . </p> ………… image-example. html </body> </html> 51
Bandwidth ¢ Image files are larger text files l ¢ Users who access the Internet via telephone lines will have to wait for image files l ¢ estimate 7 K / sec or less Use image files no larger than 30 -40 KB l ¢ Use more network resources (bandwidth) especially on heavily used pages Use "alt" text to describe images l for users with image loading turned off 52
Battling Bandwidth Limitations ¢ Always specify height and width attributes for all your images so the browser can “work around” each image while it is downloading. l ¢ ¢ ¢ TIP: To find an image dimension: open it using a Web browser, then select Properties on the File Menu. Don’t put large images at the top of a Web page Use interlaced GIFs and progressive JPGs. Use thumbnails – reduced versions of your image 53
Image links ¢ Anchors can be used to hyperlink images instead of text. <a href=“URL”><img src=“photo. jpg” alt=“My photo”></a> ¢ Whenever the mouse enters the clickable region, it will display the contents of the ALT attribute. 54
An html file is a text file containing small markup tags
Html developed by
Extra markup html
Structural markup html
Html stands for
Html 5 semantic
What is the transport system of the body
Library.med.utah.edu/kw/pharm/hyper heart.html
Html definicion
Html hyper
Html hyper
Aniket prabhune
Security assertion markup language definition
Wml format
Markup language examples
History of markup languages
E language
Critic markup
Taocomputer/recursos
Gml geography markup language
What is gml
Td vs th
Darpa agent markup language
Xml extensible markup language
Darpa agent markup language
Xtensible markup language
Xtensible markup language
Markup language
Verspeer
Uiml
蔡顯明
Pairedstart
Text-to-media connection
Canvas доска
Html
12.html?action=
Doctype html html head
12.html?title=
Bigdomaindata
Java hyper text
Tabela markup
Markup price
Markup formula
How can you obtain the markdown
Four firm concentration ratio
Markup economics
Markup percentage
Practice 6-9 markup and discount
A grocery store has a 60 markup
$8.50 yoga mat 75 markup
Doodle fiction
Burak zeydan
Linguaggio di markup
Salon retail markup
Cognitive search engine
