Transcript Basic HTML
HTML HyperText Markup Language HyperText Markup Language 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 different browser, different rendering Human-readable text format 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 3 www.w3c.org Versions of the standard HTML 1.0 HTML 2.0 1998 XHTML 1.0 4 3.0 never released added tables, applets, text flow HTML 4.0 1994 HTML 3.2 1996 1993 never fully standardized current recommendation makes HTML conformant with XML 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. 5 Browser Versions Many different browser versions all support different combinations of HTML features Current leaders Firefox IE 7 and IE 8 Netscape • way behind 6 Opera Safari Other rendering issues 7 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 Tools Text editor Web client / browser viewing files IE, Firefox, Safari, etc. Web server 8 editing HTML files (no WYSIWYG editors, please) deliver the files to users students.depaul.edu Process Write HTML file ASCII / text format extension .html or .htm Upload to server public_html directory Set permissions Similar with images 9 .gif and .jpg formats Terminology Document content Tag properties associated with a tag Entities 10 HTML codes that control document appearance Attributes the parts of the file that the user sees specially-coded characters Tag syntax 11 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 Attribute syntax Attributes are name / value pairs included in tags Attributes never include document content may include formatting information color, size, etc. HTML attributes do not need to be quoted 12 <body bgcolor=“black”> But XHTML will require it Tag types 13 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 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: <br> Ordered lists: <ol> … </ol> Unordered lists: <ul> … </ul> 17 The “Heading” tag 18 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 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> spacing-example.html <h3>Spacing test (this is an H3)</h3> <p>Here I am spacing things It does not make a difference. widely. I just left two lines blank, but I am still here! </p> One line<br> Second line<br> <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> … </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> 21 Other possible types are: square or circle 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 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> <h1>Here is an example of a ordered list </h1> <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><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 Other structure tags 28 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 Logical style tags Logical style tags describe the text content and let the browser choose the rendering. These are “good” tags. Emphasis Strong 29 <strong> </strong> usually rendered as bold Code <em> </em> usually rendered as italic <code> </code> monospaced font Others 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. 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.w3schools.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 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: 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 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, <br /> is the shorthand version of <br></br>. 36 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> 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 Can be abbreviated in a link http://maya.cs.depaul.edu/~classes/it130/assign2.html <a href=“assign2.html"> The rest of the URL is filled in 39 from the URL of the current page 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 40 Relative paths public_html main.html “images” directory hw file1.html “it130” Directory hw2.html hw2.jpg Link main.html to hw2.html: <a href=“it130/hw2.html”> Link hw2.htm to main.html: <a href=“../main.html”> Link hw2.html to hw2.jpg: <a href=“../images/hw/hw2.jpg”> Structure Your local directory structure Must match the structure on the server where you are writing your web pages contents of public_html directory Otherwise links will work when you test locally but not after being uploaded 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:[email protected]”>Bamshad Mobasher</A>. link-example2.html 43 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) 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 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 45 Image file formats GIF (Graphic Interchange Format) JPG (Joint Photographic Expert Group) 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) 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 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="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. 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> <h1 align="center"> Martin Luther King, Jr. </h1> <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 Users who access the Internet via telephone lines will have to wait for image files estimate 7K / sec or less Use image files no larger than 30-40KB Use more network resources (bandwidth) especially on heavily used pages Use "alt" text to describe images 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. 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