Download presentation
Presentation is loading. Please wait.
1
HTML
2
Three Languages in Web Pages
All web developers must learn: HTML: define the content of web pages CSS: specify the layout of web pages JavaScript: program the behavior of web pages JavaScript and Java are completely different languages, both in concept and design. JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.
3
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 With HTML you can create your own Web site
4
Three Common HTML Terms
Elements the building blocks of HTML pages. represented by tags Tags element names surrounded by angle brackets label pieces of content such as "heading", "paragraph", "table", and so on HTML tags normally come in pairs like <p> and </p> Self-Closing Elements In the previous example, the <meta> element had only one tag and didn’t include a closing tag. Fear not, this was intentional. Not all elements consist of opening and closing tags. Some elements simply receive their content or behavior from attributes within a single tag. The <meta> element is one of these elements. The content of the previous <meta> element is assigned with the use of the charset attribute and value. Other common selfclosing elements include <br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>
5
HTML Page <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
6
A Simple HTML Document <!DOCTYPE html> <html> <head> <title> Mao's Page Title </title> </head> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> </body> </html> 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 The <p> element defines a paragraph HTML tags normally come in pairs like <p> and </p> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a forward slash inserted before the tag name 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. Inside the <html> element, the <head> element identifies the top of the document, including any metadata (accompanying information about the page). The content inside the <head> element is not displayed on the web page itself. Instead, it may include the document title (which is displayed on the title bar in the browser window), links to any external files, or any other beneficial metadata. All of the visible content within the web page will fall within the <body> element.
7
HTML Terms 3. Attributes Provide additional information about HTML elements. All HTML elements can have attributes Are always specified in the start tag Usually come in name/value pairs like: name="value” Example attributes: lang, title, href, size, alt
8
Sample Page Version2 <!DOCTYPE html> <html lang="en-US"> <head> <title> Mao's Page Title </title> </head> <body> <h1>My First Web Page</h1> <p title="Title Attribute"> My first's paragraph. </p> <a href=" is a link to W3school </a> <img src="dolphin.jpg" alt="Dolphin Picture" width="104" height="142"> </body> </html> 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: Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph: HTML links are defined with the <a> tag. The link address is specified in the href attribute HTML images are defined with the <img> tag. The filename of the source (src), and the size of the image (width and height) are all provided as attributes: The alt attribute specifies an alternative text to be used, when an image cannot be displayed. The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element. All HTML elements can have attributes The title attribute provides additional "tool-tip" information The href attribute provides address information for links The width and height attributes provide size information for images The alt attribute provides text for screen readers At W3Schools we always use lowercase attribute names At W3Schools we always quote attribute values with double quotes
9
HTML Editors Write HTML using Notepad or TextEdit Open editor
Write some HTML Save the HTML (.html, .htm) set the encoding to UTF-8 (which is the preferred encoding for HTML files) View the HTML page in your browser 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.
10
Practice Write two HTML files
1. Main.html Has your name, some text description, and a picture Has a link to UW-La Crosse home page Has a link to the next second html page 2. Second.html Has a welcome message Has a “back” link to go back to the Main page Note: be sure to put all the files and the picture in the same folder
Similar presentations
