HTML Basics and Web Page Structure
Explore the fundamentals of HTML and web page creation including information on XHTML, JavaScript, and URL structure. Learn about the basic structure of an HTML document, nested tags, and the role of markup elements in web development.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
HTML WHAT IS IT? New York City College of Technology Professor Bauer
WEB PAGE The term Web pages refers to documents that are written in a language called HTML. HTML stands for Hypertext Markup Language. An HTML file is a text file. The text formatting, tabs, and line breaks in the text file do not appear when the document is viewed on a Web browser. However, the text can be marked with markup tags that tell the Web browser how to display the page. A Web browser is an application that can dis- play the HTML document in the correct format and layout according to the markup tags. An HTML document can be created using a text editor, such as Notepad in Windows or TextEdit in Mac OS. It also can be created using a Web page editor, such as Adobe Dreamweaver.
XHTML stands for Extensible Hypertext Markup Language. It is intended to be a replacement for HTML. It is almost identical to the HTML 4.01 standard but has stricter rules for writing HTML. Style sheets allow you to define styles to display HTML elements. Multiple style definitions can be combined or cascaded into one thus the term cascading style sheets.
JavaScript is a scripting language for Web pages. It can be used to generate the Web page content in response to the user s interaction. Dynamic HTML (DHTML) is a combination of HTML, CSS, and JavaScript. When combined with CSS, JavaScript can be used to control properties such as text styles, color, visibility, and positioning of HTML elements dynamically. URL stands for Uniform Resource Locator. This is the standard for specifying the address of Web pages and other resources on the World Wide Web. Markup tags come in pairs, for example, <p> and </p>. The first tag, <p>, is the start tag. The second tag, </p>, is the end tag or closing tag. Tags may have attributes. Attributes of a tag specify the properties of the element.
The very basic, bare-bones structure of an HTML document looks like this: <html> <head> <title> This is a title.</title> </head> <body\> This is the content of the Web page. </body> </html> These are tags: <html>, <head>, <title>, <body>
Nested Tags Markup elements can be nested in another element (i.e., placed within another element s content.) For example, the header and body elements are nested inside the <html> , and the <title> is nested inside the <head> ( Figure 14.1 ). Also notice the placement of the end tags in this example. This is similar to how parentheses are paired in a mathematical equation. <html> <head> <title>This is a title. </title> </head> <body> This is the content of the web page. </body> </html> Figure 14.1 Pairing of markup tags in an HTML document.
An XHTML document has the same basic structure as an HTML document, plus it has a DOCTYPE declaration. Common tags are introduced in the chapter. These include: <p> Paragraph, <br> line break, <h1> <h6>headings , <b>bold , <i> italic, <strong>bold, <em>italic, <a>hyperlink w , <img>image , and tags for table<tr>.
The <div> tag defines a division or section on an HTML document. The <div> tag is used to group block elements to format them with CSS. Some tags are: <p> paragraph <br> line break <img> Can add a closing tag </br>, </img>. Attributes-A tag may have attributes. Attributes of tag specifiy properties of the element that is marked up by a tag. For example, the id attribute assigns a name to the element.
The following shows the HTML code where an id attribute is added to a <p> tag <p> id= introduction > This is a paragraph </p> In this example, an id attribute is added inside the <p> tag and assigned with a value of "introduction" . id is a useful attribute. You can use JavaScript to refer to the element by its id to control to its properties, such as the position and the element content. There are several rules for adding attributes in XHTML: Attributes are added inside the start tag. Attributes come in as name-value pairs. The name and the value are separated by an equal sign. In the previous example, the attribute name is id , and its value is "introduction" . The value must be enclosed with quotation marks. The attribute names are lowercase.
Headings There are several heading tags: <h1> through <h6> . The number in the heading tag indicates the heading level. By default, <h1> has the largest text and <h6> the smallest. Note that by default, a blank line is inserted before and after a heading. Bold and Italics The <b> or <strong> tag can be used to indicate boldfaced text, and the <i> or <em< tag to indicate italicized text. For example: <p>This is normal text.</p> <p> <b>This text is bold. </b> <i>This text is italic.</i> </p> <p> <b><i>This text is bold and italic.</i></b> </p> <p> <i><b>This text is also bold and italic.</b></i> </p>
XHTML An XHTML document has the same basic structure as an HTML document, plus it has a DOCTYPE declaration DOCTYPE stands for document type . The DOCTYPE declaration uses the <!DOCTYPE> tag. The declaration is placed in the very first line in an HTML document, before the <html> tag. The declaration tells the browser which HTML or XHTML specification the document uses, so that the browser will display the page correctly using the appropriate specification. If the code used in the HTML document does not match the DOCTYPE declared, then some of the elements may not be displayed as expected.
Basic Document Structure of an XHTML Document The basic HTML document example that is shown in Figure 14.1 can be rewritten into an XHTML document using the Transitional document type like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd > <html xmlns=" http://www.w3.org/1999/xhtml > <head> <title>This is a title.</title> </head> <body> This is the content of the Web page. </body> </html> Except for the code added at the beginning of the document, the basic document structure is the same as that of the HTML document shown in Figure 14.1 .
Differences between the Rules for XHTML and HTML Here are several main differences between XHTML and HTML coding: XHTML elements must always be closed or paired. For example, the paragraph <p> tag must have a closing tag </p> . For empty elements, such as <br> or <img> tags, you either can add a closing tag (such as </br> and </img> ) or end the tag with /< (for example, <br /> ). XHTML tags and attributes must be in lowercase. XHTML elements must be properly nested within each other. Figure 14.2 shows the proper and improper nesting of the <p> and <div> tags. This is correct <div>Introduction<p>This is a paragraph<p></div> This is incorrect <div>Introduction<p>This is a paragraph</div></p> Figure 14.2 (a) The <div> and <p> tags are properly nested (b) The <div> and <p> tags are not properly nested
UNDERSTANDING FILE PATHS HTML documents, images, sounds, and videos are stored as files on a computer. Folders (also called directories) are used to organize files. When you open a folder, you may see other folders and/or files inside the folder. When you open a file, you will see the content of the file. To view the content of a file correctly, you will need to open the file using the right application program for example, Notepad (Windows) and TextEdit (Mac OS) for plain text files, and Adobe Photoshop for digital image. File Paths A file path refers to the location of a file on a computer, like an address to a house. When you address an envelope, you follow a certain order for example, the name of the person, the street, the city, and then the state or country. Similarly, to write a file path, you write the folder names in the order of the folder hierarchical structure start from the outermost folder to the inner folders. A file path to a file ends with the filename. The folder names are separated by a delimiter, which is a forward slash (/) or backslash (\). Forward slashes (/) are used most commonly for file paths in HTML documents.
Types of File Paths for Web Pages Suppose someone asks you for directions to see a particular painting in an art exhibition. If the art exhibition is out of town, you probably will give the person a full address, specifying the building, city, and state where the exhibition takes place. On the other hand, if the exhibition is right inside the building you are located at but on a different floor then you will give the person directions for how to get to the other floor from where you are standing. The full address with the city and state is also a valid direction, but you would not choose to give such direction in this situation. If you are in the room where the painting is, you may just point to the painting and tell the person that it is right there. You would not even mention the floor and room. You give different types of directions depending on the situation. It is the same for the file paths for Web pages.
There are three types of paths: Absolute Paths. Example: http://www.mysite.com/products/coffee/french-roast.html This is the full URL to a Web page or any media. It is like giving the full address for an out-of-town art exhibition. If you are linking to a page that is on a different Web site, you will need to use the absolute path. Document-Relative Paths. Example: products/coffee/french-roast.html This is the most common type of file path in Web authoring. It is like giving directions to get to another floor in the art exhibition scenario or pointing at the painting if you are in the same room of the painting. The direction you give is relative to where the person is standing. The direction is only valid for that specific location where the person is. The same direction becomes invalid if the person asks in another building or a different floor of the same building. The example path shown here is relative to where this french-roast.html is being requested. You will see examples on constructing document-relative paths in the next subsection. E
Site Root-Relative Paths. Example: /products/coffee/french-roast.html A site root-relative path always starts with a forward slash (/). It means starting from the root folder of the site. A root folder is the outermost folder of the site structure.
