Understanding HTML and Web Page Basics
Learn about HTML, web pages, XHTML, JavaScript, and URL basics in this comprehensive guide. Discover how to structure an HTML document, use markup tags, create a web page, and incorporate JavaScript for dynamic content. Gain insights into nested tags and the fundamental concepts of 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
URL Example: http://www.schoolname.edu/departments/compsci/index.html The address is made up of segments of standard information: www.schoolname.edu This is the domain name of the Web serve
URL Example: http://www.schoolname.edu/departments/compsci/index.html The address is made up of segments of standard information: 3. departments/compsci/index.html This is the file path of the document index.html The file path is the location information of the page on the Web server In this example, the document index.html is in a folder called compsci, which in turn is located in a folder called departments
Term XHTML Stands for Extensible Hypertext Markup Language Intended to be a replacement for HTML Most of the tags are the same as those in HTML Has stricter rules for writing HTML These stricter rules are also supported but not enforced in HTML
Term Cascading Style Sheets (CSS) Widely used for Web page design and layout 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 Style sheet files are text files The styles defined in the files follow specific rules and syntax
Cascading Style Sheets (CSS) Example: h1 { margin-bottom: -0.5em; } body{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } a { text-decoration: none; } a:visited { color: #CC9900; } a:link { color: #CC3300; } .mycode { font-family: "Courier New", Courier, monospace; color: #666666; }
Term JavaScript A scripting language for Web pages Can be used to: add interactivity generate content on the Web page based on the viewer s choice validate online forms before submission create and track cookies
Term HTML 5 The newest standard of HTML Its specifications are still a work in progress (at the time of writing the book) New features of HTML 5 include: video and audio tags content-specfic tags: footer, header, nav, article, section, figure, summary, aside tags for form elements canvas element: allows drawing graphics and displaying images dynamically using JavaScript commonly used for HTML 5 game development allowing storage and retrieval of data on the user's device using JavaScript
URLs https://www.w3schools.com/html/tryit.asp?filename=tryhtml_d efault http://www.w3schools.com/tags/ http://www.html.am/html-tutorial http://www.w3schools.com/html/html_paragraphs.asp http://www.funkychickens.com/main.asp http://m.wikihow.com/Use-Simple-HTML-Format http://m.wikihow.com/Write-an-HTML-Page http://www.w3.org/Style/Examples/011/firstcss
