Creating a Simple Page: HTML Overview Learning Web Design: Chapter 4
HTML Hypertext Markup Language (HTML) Uses tags to tell the browser the start and end of a certain kind of formatting Most tags use this method: <> - the start tag </> - the end tag HTML uses common sense names for tags <p> paragraph, <table> table, <title> title
A Brief History of HTML The base set of tags is referred to as HTML 2.0 Standard set by the W3C Set of tags all browsers must support In 1996, HTML 3.2 specification created by group of vendors and W3C Includes tables, applets, text flow around images Backward compatible with HTML 2.0 In 1997, HTML 4.0 incorporated: DHTML, Cascading Style Sheets and Frames
Enter HTML 5 New Web technologies do not handle the older versions of HTML The new HTML Standard is HTML5 This standard is known as HTML 5 Similar to HTML 4.0 Additional rules are needed to make code compliant
HTML Describes the Page Structure Documents have common elements: Lists Paragraphs Titles Headings Tables HTML also defines character styles like bold and italicize Each element has a name and is contained in a tag
HTML Does not Describe Page Layout HTML doesn’t set how a page will look when viewed Some browsers might use different default styles than others As a Web designer, pages you create could look drastically different from system to system and browser to browser
HTML Documents HTML code is stored as an ASCII text file Any text editor can be used to create these files: Notepad, TextEdit, EditPad etc. You could use a web authoring tool to write your HTML code, but they often self-generate code Focusing on the basics with a simple text editor will help you “really” learn to code
Naming Conventions For windows-based browsers, you should save the file with the extension of .htm or .html Never use spaces or special characters like # or @ in your filenames Filenames may be case-sensitive depending on the server Keep filenames short You can set your own conventions
Sample Page <html> <head> <title>My First Webpage!</title> </head> <body> <p>WOW! <br > This is pretty cool! </p> </body> </html>
What it Means <html> beginning HTML encoding. <head> beginning the header section. <title>My First Webpage!</title> title of page </head> ending the header <body> beginning the body of the document. <p>WOW! starting of a paragraph <br > line break This is pretty cool! </p> ending of a paragraph </body> ending of the body section </html> ending of HTML encoding.
Nesting of HTML Tags In the previous code example, notice how the <title> </title> tags fall in between the <head> </head> tags Also see how the <body> </body> encloses all the text you see on the screen Make sure you always use proper nesting of tags
Choosing a Good Title The title may be required, but it is also useful The title is displayed in user bookmarks and favorites Descriptive titles improve accessibility Search engines rely heavily on titles Keep the title length in check so it will fit in the title area
Attributes Attributes modify the properties of a tag For example: <img> is used to display an image. The alt attribute is used to provide alternate text for the image. <img alt=“Tiger Swallowtail Butterfly” > Part of using tags properly is understanding how to set the attributes associated with each tag If an attribute is not set explicitly, it will have a default value
HTML Comments Comments add documentation to a web page Text between the <!-- and --> will not displayed in the browser Comments can be used in any part of the web page Readers may view comments if they “View Source”
Block and Inline Elements Block-level HTML elements start on a new line and some space is added before and after the element Browsers treat block-level elements as if they were little rectangle boxes stacked on the page Inline HTML elements do not start a new line, but stay in the flow of the paragraph
Empty HTML Tags Some tags start and end in a single tag <meta > meta data, documentation <hr > horizontal rule <br > line break These tags are empty tags because they have no separate ending tag Sometimes you may see a closing / character used with these tags <br /> <hr /> <meta />
Validation Each page we write this semester will be checked for proper syntax We will be validating our pages according to the HTML 5 standard The W3C has set up a method of validation on their website: http://validator.w3.org We will walk through this procedure later in the semester
Coding Guidelines HTML 5 does not require documents to be “well-formed” to be valid All tags and attributes can be lowercase or uppercase letters Empty tags do not require a closing /, for example <br> and <br /> both okay Block-level ending tags are not required (will be closed before another begins) Attribute values may or may not be quoted
Using Cascading Style Sheets CSS allows you to control the “look and feel” of your web pages There are three levels of CSS: Inline – styles are wrapped around tags Embedded – styles are group at beginning of file External – styles are placed in a separate file and linked to the web page More on CSS later
Summary HTML allows us to specify the structure, not the formatting of a Web page We will be writing our pages using the HTML 5 standard The governing body of Web standards is the World Wide Web Consortium, the W3C HTML code can be written in any plain text editor WYSIWYG editors are easy to use but their code may add proprietary code and may not validate