Notes - Briar Cliff University
advertisement
Day #2 Thu 1/24/2013 Every HTML document has two top-level parts: 1. The DOCTYPE declaration 2. The document tree The DOCTYPE declaration is the first thing in every HTML5 document, and looks like this. Although you may see more complex DOCTYPE tags, in HTML5, this is all you need: <!DOCTYPE html> The document tree is enclosed within an HTML start tag and an HTML end tag. All HTML tags are enclosed in angle brackets. The start tag looks like this: <html> And the end tag looks like this: </html> Most HTML tags come in pairs (a start tag and an end tag). The end tag is identical to the start tag except that it has a slash after the opening angle bracket. An HTML element is everything from the start tag to the end tag. Everything between the tags is the element's content. A handful of HTML elements have no content and therefore do not require a closing tag. An example is the break element (<br>), which forces a line break. HTML elements can be nested. The case of tags in HTML5 is irrelevant (but are usually written in lower case). They are required to be in lower-case in XHTML. Head and Body tags Every <html> element is divided into two smaller elements: The head element (<head> and </head>) The body element (<body> and </body>) So the simplest HTML document with both a head and a body looks like this: <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Create this document in Notepad, save it to the desktop as Page0001-Template.htm and read it into your browser. It will load, but the page will be (obviously) blank. Leave it open in an instance of Notepad, and open a second instance of Notepad. We will copy this template (Page0001) into the new instance of Notepad every time we want to try Document1 1 2/9/2016 something. This approach will give us a lot of files, but each file will be small and focused on a single aspect of HTML. The <head> section The <head> tag The head section contains information about the document (sometimes called metadata, or "data about data"). The <head> element is used to hold scripts, locations of style sheets, meta data, etc. The following tags can be placed in the head of an HTML5 document. HTML head Elements Tag Description <title> Defines the title of a document <base> Defines a default address or a default target for all links on a page <meta> Defines metadata about an HTML document <link> Defines the relationship between a document and an external resource, usually a style sheet <script> Defines a client-side script <style> Defines style information for a document The <title> tag Use the <title> tag to specify the title of your document. This is what will appear in search engine results and in the tab at the top of your browser. Always code a title. Create the following HTML file. Save the file as Page0002-Title.htm. <!DOCTYPE html> <html> <head> <title>Tom's Page</title> </head> <body> </body> </html> The <base> tag The <base> tag is used to specify a base address for all of the files that you will reference. It can make the URLs shorter if most of your files are from the same folder (and that folder Document1 2 2/9/2016 is different from the folder that this page is in). Create the following HTML file. Save it as Page0003-Base.htm. <!DOCTYPE html> <html> <head> <base href="http://old.briarcliff.edu/departments/cis/csci425/"/> </head> <body> <a href="index.htm" >Home Page</a> </body> </html> Try the above code without the closing "/" after the 425 in the base tag. It does not work! The <meta> tag The <meta> tag is used to define metadata about a web page. Some common attributes of the <meta> tag are: charset name content Required in HTML5. Specifies the type of character encoding used by the page. Use UTF-8. UTF-8 is a way to represent the Unicode character set using a variable-length encoding. Using this, the traditional ASCII character set (a subset of Unicode) can be represented using only one byte per character instead of the 3-bytes that would be required by Unicode. Specifies the type of metadata. Common values are description and keywords. Specifies the values for the data specified in the name attribute. Examples Define the character set (required in HTML5) <meta charset="utf-8"> Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> Define a description of your web page: <meta name="description" content="A course on web programming"> Define the author of a page: <meta name="author" content="Tom Kleen"> Refresh document every 10 seconds: <meta http-equiv="refresh" content="10"> Add the above elements to your file and save it as Page0004-Meta.htm. <!DOCTYPE html> <html> <head> Document1 3 2/9/2016 <base <meta <meta <meta <meta <meta href="http://www.briarcliff.edu/departments/cis/csci425/"/> charset="utf-8"> name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> name="description" content="A course on web programming"> name="author" content="Tom Kleen"> http-equiv="refresh" content="10"> </head> <body> <a href="index.htm" >Home Page</a> </body> </html> Since we are adding metadata, you won't see any new content visible on the screen. But since the page is refreshing itself every 10 seconds, you should notice a flicker (at least on the Refresh button) when it refreshes. The <link> tag Defines the relationship between a document and an external resource, usually a style sheet. More on style sheets later. But it can also be used to define a favicon. Adding a favicon A favicon is the image that appears on the browser tab when your page is displayed: You can add your own favicon to a web page. Chrome appears to be able to use png and jpeg formats (and possibly others as well). IE requires that the file be in the ico file format. Paint.NET doesn't have an option to save files in the ico format, but you can save a png or jpeg and convert it. Some options for conversion: ConvertICO web site: http://convertico.com/ Zamzar web site: http://www.zamzar.com/ Irfanview Windows application. To include a favicon, add the following line in the <head> section of your web page. Save the file as Page0005-Favicon.htm. <link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="http://www.foxnews.com/favicon.ico"> The Fox News favicon should appear. Create your own favicon NOTE: It appears that Chrome and IE do not display favicons when they read files from your local file system. Only when read from a web server. However, Firefox will display favicons, so try viewing this page in Firefox. Find an image on the web. Some possibilities: the BCU logo, a picture of you, a picture that symbolizes your web page. The picture should be relatively square. Document1 4 2/9/2016 Copy it into Paint.Net. Crop any unnecessary parts around the edge of the image. Resize the image to 128x128 pixels. Reduce the number of colors. Save as a png file. Go to http://convertico.com/. Convert your file to an ico file. Save it on your desktop as favicon.ico. Change the <link> tag to the following: <link rel="shortcut icon" href="file:///c:\users\kleent\desktop\favicon.ico"> Save the file as Page0006-Favicon.htm. The <style> tag The <style> tag is used to provide style information using CSS. Not recommended. More later. The <script> tag The <script> tag is used to include JavaScript scripts. It can either enclose the actual code, or provide a link to an external file that holds the script. <script src="support.js"></script> The <body> section The <body> tag All of your page content is stored in the body element. We will look at some of the basic HTML tags. HTML Headings: the <h1> through <h6> tags HTML headings are defined with the <h1> to <h6> (heading 1 through heading 6) tags. Example <h1>This <h2>This <h3>This <h4>This <h5>This <h6>This is is is is is is a a a a a a heading heading heading heading heading heading 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6> Use headings for structure, not formatting! Document1 5 2/9/2016 Try it Add the above code to the <body> part of a new HTML document. Save the file as Page0007-Headings.htm and preview it. <!DOCTYPE html> <html> <head> <base href="http://www.briarcliff.edu/departments/cis/csci425/"/> <meta charset="utf-8"> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <meta name="description" content="A course on web programming"> <meta name="author" content="Tom Kleen"> <meta http-equiv="refresh" content="10"> </head> <body> <h1>This is a heading 1</h1> <h2>This is a heading 2</h2> <h3>This is a heading 3</h3> <h4>This is a heading 4</h4> <h5>This is a heading 5</h5> <h6>This is a heading 6</h6> <a href="index.htm" >Home Page</a> </body> </html> HTML Paragraphs: the <p> tag HTML paragraphs are defined with the <p> (paragraph) tag. Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> Try it Add the following to your file. Save it as Page0008-Paragraph.htm. <!DOCTYPE html> <html> <head> <base href="http://www.briarcliff.edu/departments/cis/csci425/"/> <meta charset="utf-8"> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <meta name="description" content="A course on web programming"> <meta name="author" content="Tom Kleen"> <meta http-equiv="refresh" content="10"> </head> <body> <h1>This is a heading 1</h1> <h2>This is a heading 2</h2> <h3>This is a heading 3</h3> <h4>This is a heading 4</h4> <h5>This is a heading 5</h5> <h6>This is a heading 6</h6> Document1 6 2/9/2016 <p>This is a paragraph.</p> <p>This is another paragraph.</p> <a href="index.htm" >Home Page</a> </body> </html> Try adding carriage returns and blanks to your paragraph text. See what happens. HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: Example <!-- This is a comment --> Try it Add some documentation at the top of your document. Save it as Page0009Comments.htm. <!-- Author: Your Name Date: Today's Date --> HTML Line Breaks Use the <br> tag if you want a line break (a new line) without starting a new paragraph. The <br> element is an empty HTML element. It has no end tag. Example <p>This is<br>a para<br>graph with line breaks</p> Try it Add the following to your document. Save it as Page0010-Break.htm. <p>This is<br>a para<br>graph with line breaks</p> HTML Text Formatting Tags Use these for formatting. Use the heading (<h1>-<h6>) tags and paragraph (<p>) tag for structure. Tag Description <b> Defines bold text <em> Defines emphasized text (italic) <i> Defines a part of text in an alternate voice or mood (italic) Document1 7 2/9/2016 <small> Defines smaller text <strong> Defines important text (bold) <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text Try it Create the following text in your HTML file. Save it as Page0011-TextFormatting.htm. Albert Einstein says that e=mc2. Water is H20. Document1 8 2/9/2016
