Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML - Kirkwood Web Certificate Server
Document related concepts
Transcript
HTML Cyndi Hageman The Internet The internet is a worldwide collection of computer networks sharing information via a common set of networking and software protocols. History 1960’s – funded by the Department of Defense – they wanted computers that could communicate in spite of a nuclear attack. ARPAnet was available and used by defense conractors and academic institutions. 1990’s businesses wanted it opened up for unrestricted traffic. History (cont.) Internet was too disorganized – it was hard to connect and the information was sent in pieces. CERN came up with HTML browser software that unified text, graphics and sounds NCSA at the University of Illinois created Mosaic, the first web browser to interpret HTML. It was free. How it all works Every computer is identified by a number. Numbers are too difficult to remember so every site is also identified by name. http – Hypertext Transfer Protocol is the means of transferring web pages. The client requests a page, the page is sent to the client from the server via http How it all works (cont.) www is the prefix (world wide web) Domain name – the unique given name of a web site Domain .com .net .org .edu .gov commercial internet service provider nonprofit organization educational institution US government W3C World Wide Web Consortium Define the standard of HTML and XHTML Standardize any technology related to the web css Xml http Things to Know Window – the browser window that opens Web page/document – the content of a page that is displayed in a window url – uniform resource locator – web page address HTML vs. CSS HTML and XHTML are all about structure of a web page. It lays out how the content of the web page are to appear. CSS makes that content look good. CSS is all about appearance. HTML Tags HTML is created by using tags. Most tags have an opening tag and a closing tag and you place the content between the tags. There are some that do not require a closing tag in HTML. XHTML vs. HTML The highest level of HTML is 5 http://webdesign.about.com/od/ht ml5/qt/what_is_html5.htm The next generation is XHTML 1.0. XHTML Lower case All tags need a closing tag Tags must be properly nested Basic HTML Document <html> <head> </head> <body> </body> </html> Basic XHTML Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns=“http://www.w3.org/1999/xhtml> <head> </head> <body> </body> </html> XHTML Like HTML but uses DTD to define XML elements <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht ml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > XHTML Nested Tags Same as current HTML <b>This statement is <i>itallic</i></b> End Tags are required <p></p> <br /> <input type = “text” name=“txtName” /> XHTML Case sensitive All html tags need to be lower case Attributes in Quotes All attribute values must be in double quotes <table name=“tblTableOne” cols=“3” rows=“5” width=“500”> XHTML Explicit Attribute values All attributes must have a value <option “IA” selected=“selected”> <input type=“radio” name=“rdoMF” value=“M” checked=“checked”> Special Characters Put javascript in external files <img src=“saltandpepper.jpg” alt=“Salt & Pepper”> See appendix F for character definitions XHTML Name vs. Id XHTML has a strong preference for the Id tag If you have to use the name attribute for a tag, then also add the id attribute DTD The doctype declaration should be the very first thing in an HTML document, before the <html> tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly. DTD HTML 4.01 Strict contains all HTML elements and attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > DTD HTML 4.01 Transitional contains all HTML elements and attributes, including presentational and deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > DTD HTML 4.01 Frameset equal to HTML 4.01 Transitional, but allows the use of frameset content. <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/fram eset.dtd"> DTD XHTML 1.0 Strict contains all HTML elements and attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as wellformed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht ml1-strict.dtd"> DTD XHTML 1.0 Transitional contains all HTML elements and attributes, including presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht ml1-transitional.dtd"> DTD XHTML 1.0 Frameset equal to XHTML 1.0 Transitional, but allows the use of frameset content. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DT D/xhtml1-frameset.dtd"> DTD XHTML 1.1 equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT D/xhtml11.dtd"> <title></title> Located in the <head></head> Used to give a title to the page. It shows up in the browser window. Helps web search engines to find your page. Comments You should always put comments in your code to define your page. You may not be the one maintaining the page after it is built. <!-- put comments here --> Comments are ignored by the browser but can be seen when the client views the source. Headings Heading tags are used to put titles or subtitles on your page. <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> Text You can separate or distinguish text in different ways <p></p> - paragraph – puts one blank line after the text <br> - line break – moves text to the next line with no blank line between <div></div> - allows you to divide your page in sections – puts one blank line after text <span></span> - allows you to distinguish inline text to apply a style or format. italic <i></i> - physical element that will make the text italic. <em></em> - logical element that will make the text italic and will make the text accessible to screen readers. bold <b></b> - physical element that makes text appear bold. <strong></strong> - logical element that makes text appear bold and is accessible to screen readers. Nesting Elements Elements need to be nested properly to be displayed properly by the browser and to be validated correctly The tag that is opened first, must be closed last <p>The article will be featured in the <b>Cedar Rapids Gazette</b></p> Other Content Tags <address></address> - text is an address and is displayed in italic <blockquote></blockquote> indents the text on the left and right and some browsers display in italic <cite></cite> - indicates a citation or reference and displays in italic. Page 77 for more content tags Character Entities Begin with & and end with ; Examples ® registered symbol © copywright symbol non-breaking space « left-pointing double angle quotation mark ¼ one quarter fraction ½ one half fraction ¾ three quarters fraction Character Entities (cont.) http://www.evolt.org/article/ala/17/ 21234/ http://htmlhelp.com/reference/html 40/entities/ Horizontal Rule <hr /> Provides a line on the page give a visual separation You can set attributes within the tag to determine appearance such as size and color. Text Size <big></big> - makes the text one size bigger than the default. <small></small> - makes the text one size smaller than the default. Unordered Lists Lists items using a bullet or an image in place of a bullet <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> Ordered List Lists items with numbers, letters or roman numerals <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> Definition List Used to create a glossary or FAQ page <dl> <!--definition list --> <dt> <!--definition term--> </dt> <dd> <!--definition description--> </dd> </dl> Nested Lists Lists can contain other lists The browser will automatically the bullets or numbering style based on the level of nesting Nested Lists (cont.) <ul> <li>Movie Channels <ul> <li>HBO</li> <li>Show Time</li> </ul> </li> <li>Learning Channels <ul> <li>Discovery Channel</li> <li>History Channel</li> </ul> </li> </ul> Linking One of the best features of HTML is our ability to link to other pages You can link to another page in your web site, an outside url, another part of the page you are on or an email address. Use the <a> tag or anchor tag to create a link. Inter document linking You can link to a page within your web site. You should try to list the entire path to that file <a href = “/default.htm”>Home</a> External Link You can create a link to another web page outside of your website Consider using the target attribute to open up a new window <a href=“http:www.adobe.com” target = “_blank”>Download latest version of Adobe Reader</a> Email link You can create an email link to open the users default email program and specify the email addres it is to be sent to. <a href= “mailto:[email protected]?S ubject=Site Feedback” title=“Email Web Help”>Web Help</a> Intra-document links You can create a bookmark on a page using a named anchor The spot on the page you want to set as a bookmark uses the name attribute with no href. The link you want to create that makes the user jump to a named anchor uses the href. Intra-document links (cont.) <a href=“#movie”>Movie Channels</a> <a name=“movie”>Available Movie Channels Through Cable</a><p>We offer several movie channels including HBO, Show Time and Stars</p> GIF Images Graphic Interlaced Format Used for buttons, logo’s, drawings and non-photographic images Download quickly Limited to 256 colors Created in graphic design programs such as Photoshop, Paint Pro or Fireworks GIF Variations Interlaced – gif will come into focus gradually while the rest of the page loads Transparent – page background can show through transparent parts of the image so you can have curved edges or other shapes Animated – images saved in a single file that allow for simple animated images. JPG Images Joint Photographic Experts Group Used for photographic images Usually a bit bigger in size than gif images and may take longer to load Image Tag <img /> - does not require a closing tag Src attribute defines the path to where the image is stored. Width and height – you can define the width and height of an image so the browser does not have to determine the dimensions of the image <img src=“images/mypic.jpg” width=“120” height=“200” /> Alternative Text Description of the image or indication of the purpose of the image Displayed if users shut off images in their browser Screen readers read the alternative text Screen tip on mouseover Image Border You can use the border attribute to create or remove a border on an image. Set the border thickness in pixels: border = “1” border = “0” – no border Aligning Text The <img> tag embeds the image in the HTML document. Text will appear above or below the image Use align attribute to align text the left, right, top or middle of the image. Image as a Hyperlink You can make an image a hyperlink by wrapping an <a> around the <img> tag <a href=“default.htm”><img src=“images/logo.gif” /></a> Image Map You can use an image map to make part of an image linkable – may be used when displaying a map and you can click on different states to display different pieces of information. Ismap – server side processing of clicking on a map. Usemap – client side processing of clicking on a map. http://www.image-maps.com/ Usemap Example <a href=“processmap.asp”> <img src=“images/map2.gif” ismap usemap=“#map2”> </a> <map name=“map2”> <area coords = “0,0,49,49” href=“Iowa.html”> <area coords = “50,0,99,49“ href=“Illinois.html”> </map> Attributes Tags such as <body>, <div> or <table> can have attributes set within the tag for a background image, background color or link state Bgcolor- set this to give that element a background color Background – set this attribute to the url of an image to give it a background image. Attributes (cont.) In the <body> tag you can set the state of links Link=“orange” - sets any link in the body of that page to orange before it is visited Vlink=“red” - once a link is visited, it sets the color to red. Alink=“green” - when you click on a link to make it actve the color will be green. These attributes are deprecated in HTML 4.0 because they should now be set with styles.
