Building Blocks of a Web Page HTML, HTML 5, CSS & XHTML Chapter 1 Building Blocks of a Web Page HTML, HTML 5, CSS & XHTML
Objectives Create your first web page Know the four major tags Know the difference between HTML & XHTML
What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page
HTML & XHTML HTML – HYPER TEXT MARKUP LANGAUGE XHTML stands for EXtensible HyperText Markup Language XHTML – XML & HTML merged all the features of HTML along with XML. XHTML is almost identical to HTML XHTML is stricter than HTML XHTML is HTML defined as an XML application XHTML is supported by all major browsers
Why XHTML? Many pages on the internet contain "bad" HTML. This HTML code works fine in most browsers (even if it does not follow the HTML rules): <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body> The code above is missing two close tags </head> & </html>. It will run on most browsers even if it contains errors. XHTML resolves that problem. Don’t worry about knowing the above code, it will be discussed later. Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret "bad" markup (tags). That is why the switch toXHTML. XML is a markup language where documents must be marked up correctly (be "well-formed"). By combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML.
HTML & XHTML HTML 4 & XHTML use precisely the same elements, attributes and values. The difference is the syntax. Note: (X)HTML means it is the same for both HTML and XHTML. When talking about XHTML, I’ll use XHTML without the parenthesis. I’ll use HTML when just talking about HTML only. (X)HTML consists of tags. Tags can be identified by open & closed angle brackets (<…>) open. Some tags have a closed tag and can be identified with a slash (</ … >) closed tag. While other tags (empty tags) don’t need closed tags because it doesn’t wrap around a text but does consist of a slash at the end of tag command (<…/>) empty tag. XHTML is stricter than HTML. Browsers are more sensitive with proper structure for XHTML. All attributes for XHTML must be enclosed in double quotes. In HTML, forgetting to enclose attributes in double quotes does not cause an error. XHTML is case sensitive and all elements, values & attributes must be lowercase. HTML is not case sensitive. So why XHTML! It will be easier to format with CSS or generate from or convert into a database, and adapt to other systems.
HTML & XHTML consists of tags. Tags can be identified by open & closed angle brackets (<…>). Some tags have a closed tag and can be identified with a slash (</ … >) while other tags (empty tags) that doesn’t because it doesn’t wrap around a text.
HTML Editors Write HTML Using Notepad or TextEdit Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Follow the four steps below to create your first web page with Notepad or TextEdit. Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files). You can use either .htm or .html as file extension. There is no difference, it is up to you.
Saving an HTML document
A Simple HTML Document <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Lab Explained The <!DOCTYPE html> declaration defines this document to be HTML5 The <html> element is the root element of an HTML page The <head> element contains meta information about the document The <title> element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading. Headings go from 1 to 6. The <p> element defines a paragraph
Examples: <em> Text</em> - This will italicize all text between the open <em> tag and the closed </em> tag Empty elements – meaning they stand alone unlike the above example don’t need a closed tag. <img src = “picture.jpg” width = “300”/> - Displays a picture has no effect on any text
Attributes Some tags have attributes that effects how the tag will behaves. “src” & “width” in the above img tag are the attributes and has a value of 300. The command using the above example is img & em Example: Attribute Value Attribute Value <img src = “picture.jpg” width = “300”> - Displays a picture has no effect on any text
Four major tags for all web pages <html> - Tells the browser that an HTML document is to follow <head> - Open up the heading that allows you to insert a title or styles for CSS. <title> - Puts a title at the top of the screen not part of the main webpage. <body> - This is where the tags will go to design your webpage.
Four Major Tags <html> ….. </html> - opens an HTML document for Browsers to interpret. All tags and text are located between these two tags <head> …. </head> - Opens up the heading so a title can be put in your page. Located between the <html>’s tags <title> - This is where you put the title of the page and it will show above the toolbar not on the main screen area. </title>. The <title> & </title> is located between the open and closed tags of the <head> tags. <body> This is where most of your text and code goes</body>. The <body> tags are located between the <html> & </html> tags.
Golden Rule <html> <head><title> Look at me!</title></head> <body> My very first web page! </body> </html> *** Notice there is no intersection of the Open and closed tags with others tags. When tags are inside other tags, we called them nested. Golden Rule – Last one open first one closed
Golden Rule of Nested Tags Opening and Closing tags Rule – last tag open is the first tag closed. Example: 1. <head><title> Look at me!</title></head>
Let’s review: Tags are in an open and closed angle brackets <> also called open tag it starts the command at that point. Closed Tags can be identied with the slash inside of the double <>’s. (</… >). They stop the command at that point. Empty elements – are stand-alone tags that don’t need a closed tag. Command follows the < angle bracket. It applies that command at that point until it is closed. Attributes – are in the open tag after the command and has an effect on how the command will be displayed or act. Value – follows the attribute with an equal (=) symbol.
Use Lowercase Tags HTML tags are not case sensitive: <P> means the same as <p>. The HTML5 standard does not require lowercase tags, but you should use lowercase in HTML, and demands lowercase for stricter document types like XHTML.
The lang Attribute The language of the document can be declared in the <html> tag. The language is declared with the lang attribute. Declaring a language is important for accessibility applications (screen readers) and search engines: <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> The first two letters specify the language (en). If there is a dialect, use two more letters (US).
Use the Internet to find out the following countries Spain – es Germany – de France – fr Portugal – pt Brazil – pt (they speak Portuguese)
The Most Important Differences from HTML: Document Structure XHTML DOCTYPE is mandatory The xmlns attribute in <html> is mandatory <html>, <head>, <title>, and <body> are mandatory XHTML Elements XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element XHTML Attributes Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden Again, don’t worry about the above statements; we will be covering all of this throughout this course.
The <!DOCTYPE> Declaration The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <!DOCTYPE> declaration is not case sensitive. The <!DOCTYPE> declaration for HTML is: <!DOCTYPE html>
Lesson on Docs <!DOCTYPE ....> Is Mandatory The <!DOCTYPE> declaration must be the very first thing in your 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 HTML the page is written in. An XHTML document must have an XHTML DOCTYPE declaration. The <!DOCTYPE> declaration is NOT case sensitive. The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document. This example shows an XHTML document with a minimum of required tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
There are several DOCS to pick from XHTML 1.0 Strict This DTD 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 well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional This DTD 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/xhtml1-transitional.dtd"> XHTML 1.0 Frameset This DTD is 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/DTD/xhtml1-frameset.dtd"> XHTML 1.1 This DTD is 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/DTD/xhtml11.dtd">
Meta Tags Definition and Usage Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. Tips and Notes Note: <meta> tags always goes inside the <head> element. Note: Metadata is always passed as name/value pairs. Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. If none of these are defined, the content attribute CANNOT be defined. Examples Example 1 - Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> Example 2 - Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS"> Example 3 - Define the author of a page: <meta name="author" content="Hege Refsnes"> Example 4 - Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">
Adding Comments You can add comments to your HTML documents in order to remind yourself or others of what you trying to achieve with your HTML code. These comments only appear when the document is opened in the text editor. They are invisible to visitors in the browser. Adding a comment <!—Comment Message Here --> does not show up in the browser window ***Note – Beware that others can view your code in which they can view your comments in the browser page source page.
Comments: <!- - … - -> Definition and Usage The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
Summary HTML uses tags which are enclosed in the angle brackets (< , >). Four major tags <html>, <head>, <title>,<body> Attributes effects the behavior of the tag. Golden Rule: Last tag open is the first tag closed. Save your HTML documents as .html or .html
Questions What is the purpose of attributes? Gives tags effects Why should tags be in lowercase? So it can be easily converted to other HTML versions that are case sensitive What initials would you use for Spanish when using the lang attribute in the body tag? (Google) es What is an empty tag? That’s that don’t have a close tag What are nested tags? Tags that are inside other tags ex: <i><b> Text</b></i>
What are the 4 major tags in an HTML document? <html><head><title><body> Between what two tags does most of the web page coding occurs? <body> What is the purpose of <!DOCTYPE html> Tells the browser what version of HTML to use to display it Are certain tags common among the different versions of html? Yes Do all tags have a close tag? No