HTML 101

HTML 101Jennifer VentusH-T-M-LA web page is created using a language called, HyperText Markup Language, better known as HTML. It can be written its own coding within a plain text editor, such as Note Pad.2Versions of HTMLHTMLHTML 4.01XHTMLHTML5Tags may be written in lowercase, uppercase, or mixedTags are written strictly in lowercaseTags are written strictly in lowercase

Tags are written strictly in lowercase

Does not have !DOCTYPE elementUses !DOCTYPE for Document Type DefinitionUses !DOCTYPE for Document Type DefinitionUses !DOCTYPE for Document Type Definition

HTMLingoINTERNET (INTERnational NETwork)ARPANETINTERNETNETInternet was originally created during the Cold War as a way to link sections of the country together during an emergency, the actual term Internet wasnt used until the early 1970s.WEB BROWSERSimply called browsers, interpret the HTML code and provide a visual layout displayed on the screen. Browsers typically can also be used to check web-based e-mail and access newsgroups.Internet was originally created during the Cold War as a way to linksections of the country together during an emergency, the actual term Internet wasntused until the early 1970s. At that time, academic research institutions developed theInternet to create better communication and to share resources. Later, universities andresearch facilities throughout the world began using the Internet. In the early 1990s, TimBerners-Lee created a set of technologies that allowed information on the Internet tobe connected through the use of links in documents. The language component of thesetechnologies is Hypertext Markup Language (HTML).4HTMLingoINTERNET SERVICE PROVIDER an ISP is used to gain access to the Internet.URL (UNIFORM RESOURCE LOCATOR) is simply the web address. http://www.MyDomain.com.phInternet was originally created during the Cold War as a way to linksections of the country together during an emergency, the actual term Internet wasntused until the early 1970s. At that time, academic research institutions developed theInternet to create better communication and to share resources. Later, universities andresearch facilities throughout the world began using the Internet. In the early 1990s, TimBerners-Lee created a set of technologies that allowed information on the Internet tobe connected through the use of links in documents. The language component of thesetechnologies is Hypertext Markup Language (HTML).5HTMLingohttp://www.MyDomain.com.phprotocol- Indicatates what protocol will be used to access the URL. The protocol is followed by://

HTTP HyperText Transfer ProtocolHTTPS HyperText Transfer Protocol SecuredFTP File Transfer ProtocolMailto - Internet was originally created during the Cold War as a way to linksections of the country together during an emergency, the actual term Internet wasntused until the early 1970s. At that time, academic research institutions developed theInternet to create better communication and to share resources. Later, universities andresearch facilities throughout the world began using the Internet. In the early 1990s, TimBerners-Lee created a set of technologies that allowed information on the Internet tobe connected through the use of links in documents. The language component of thesetechnologies is Hypertext Markup Language (HTML).6HTMLingoHyertext Transfer Protocol (HTTP) is the protocol between the clientand theserverHyperTextTransferProtocolSecure (HTTPS) is a secure version of HTTP. Its basically an encrypted HTTP channel that encrypts all the information being exchanged, making transferring of confidential information secure from eavesdropping, such as doing banking online.File Transfer Protocol (FTP) is commonly used by webmasters to access the files on their webservers.Mailto provides a link to an email message from a webpageHTTP is the protocol between the client(your computer using web browsers) and theserver(web server serving web pages and similar online resources)

Its what browsers and web servers rely on for exchanging data - surf the web, browse web pages, download pictures, and viewing YouTube.

HyperTextTransferProtocolSecure (HTTPS)and is a secure version of HTTP. Its basically an encrypted HTTP channel that encrypts all the information being exchanged, making transferring of confidential information secure from eavesdropping, such as doing banking online.

7HTMLingoURL (UNIFORM RESOURCE LOCATOR) is simply the web address. http://www.MyDomain.com.phThis is the name of the "host" computer where the web page is stored and is a common name given to computers connected to the web. However, it's not necessary for web addresses to begin with "www." The web page might also be stored on a host computer or server named something else.Internet was originally created during the Cold War as a way to linksections of the country together during an emergency, the actual term Internet wasntused until the early 1970s. At that time, academic research institutions developed theInternet to create better communication and to share resources. Later, universities andresearch facilities throughout the world began using the Internet. In the early 1990s, TimBerners-Lee created a set of technologies that allowed information on the Internet tobe connected through the use of links in documents. The language component of thesetechnologies is Hypertext Markup Language (HTML).8HTMLingoURL (UNIFORM RESOURCE LOCATOR) is simply the web address. http://www.MyDomain.com.phdomain or IP address- the specific address of where the site youre looking for is located on the Internet. To draw an analogy, if the domain name is the word Emergency written next to the first-aid symbol on your speed dial, the IP address is 9-1-1Internet was originally created during the Cold War as a way to linksections of the country together during an emergency, the actual term Internet wasntused until the early 1970s. At that time, academic research institutions developed theInternet to create better communication and to share resources. Later, universities andresearch facilities throughout the world began using the Internet. In the early 1990s, TimBerners-Lee created a set of technologies that allowed information on the Internet tobe connected through the use of links in documents. The language component of thesetechnologies is Hypertext Markup Language (HTML).9HTMLingoTop-level domainsDesignations.eduBesides the institution's official web pages, students or faculty members can also publish personal pages on these web sites..comThis is the most common type of site for companies and is often used to advertise and sell products. Online journals or newspapers also have .com web pages..orgThis designation is used for any type of organization, including nonprofit organizations..netOriginally designated for organizations directly involved in Internet organizations. It is often used by businesses when the desired name under ".com" is already registered by another organization..govOriginally only for the federal government, .gov is now used for any level of government. 10HTML Basic Structure

Begins HTML documentContains information about the page such as the TITLE, META tags for proper Search Engine indexing.The TITLE of your page. This will be visible in the title bar of the viewers browser.This is where you will begin writing your document and placing your HTML codes.HTML Basic StructureHTML

HTML 5

XHTML

HTML Basic ElementsDoctype is a required tag that is used to tell the browser which version of HTML is used in the document. HTML Basic Structure

HTML 5XHTML 1.0Root element in the pageXHTML 1.0 standards is publicly availableCode is written in XHTML 1.0 and the markups are written in EnglishThe DTD (Document Type Definition) indicates to a web browser what markup youre using, thereby enabling thebrowser to accurately display the document in question14HTML Basic ElementsW3C three versions to accommodate the anticipated transition time during which developers and browsers were supposed to migrate from HTML 4.0 to XML:XHTML Transitional For documents that contain a combination of old and new HTML codeXHTML Strict For documents that dont contain any outdated code and are structurally cleanXHTML Frameset For documents containing framesHTML Basic Elementsmeta ElementsThis tag tells any browser the content type of your file, and what kinds of characters are used to encode it.A meta element can be used in a web page for different reasons. Some are used to provide additional information thats not displayed onscreen to the browser or search engines; for instance, the name of the pages author or a copyright notice might be included in meta elements. HTML Basic ElementsIn the example, the meta tag tells the browser which character set to usespecifically, UTF-8, which includes the characters needed for web pages in just about any written language.

Untitled Document

The Importance of UTF-8If you neglect to select UTF-8 when saving your files, youre likely not to noticemuch of a difference. However, when another user whose language is differentfrom yours tries to view your website, theyll probably end up with a screen ofgobbledygook. Why? Because their computer is set up to display text in their30 Build Your Own Website The Right Way Using HTML & CSSwww.it-ebooks.infonative character set, while yours is set up to create English text. UTF-8 can handlejust about any language there is (including some obscure ones), and most computerscan read it, so UTF-8 is always a safer bet.17HTML ValidationThe purpose of validation is to help identify potential problems a browser might encounter when displaying your page. The official W3C validation service can be found at http://validator.w3.org. Different methods to test or validate your pages.Validate by URI If your page is already live on the Internet, you can simply enter the pages URI (address), and the tool will seek to validate your page.Validate by file upload If youre working on pages currently stored on your hard drive (but not live on the Internet), you can upload those pages to the online validator.Validate by direct input Alternatively, you can simply copy and paste the code into an online form at the validation service.The purpose of validation is to help identify potential problems a browser might encounter when displaying your page. Because browsers render pages according to the official HTML specifications (as dictated by the W3C), it makes sense to double-check your pages against those specs as part of your testing.

18HTML ValidationW3C (World Wide Web Consortium) is an international community that develops open standardsto ensure the long-term growth of the Web.

This validator checks themarkup validityof Web documents in HTML, XHTML, etc.Naming ConventionHTML files have an .html or .htm file extension. Naming and referencing should be consistent to avoid confusion. Use simple filenames with only letters and numbers. Dont use spaces, punctuation, or special characters, other than hyphens (-) and underscores (_).HTML4/XHTML is case-sensitive and requires all tags to be lowercase.Although in most cases it doesnt matter whether you use .html or .htm, you should beconsistent to avoid confusing yourself, the browser, and your users.NOTEWondering why some people use .html and some use .htm? Older systems such asWindows 3.1 and DOS could not understand four-letter file extensions, so anyonecreating web pages on those systems used .htm as the extension. In any case, becausethe first three letters of .html and .htm are the same, those systems simply ignored the Iand recognized the file type without any problems.

Use simple filenames with only letters and numbers. Dont use spaces, punctuation, orspecial characters, other than hyphens (-) and underscores (_). Good examples might behome.html, my-story.html, and contactme.html.20Naming FoldersIf you were linking to a file in another folder below the current one, the value of your href might look like the following: