Download presentation
Presentation is loading. Please wait.
1
HTML Structure & syntax
2
Introduction This presentation introduces the following:
Doctype declaration HTML Tags, Elements and Attributes Sections of a Web document Role of Web browser Text editor Saving and previewing files Html 5
3
World wide web consortium
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
4
Doctype declaration In HTML5 there is only one <!doctype> declaration, and it is very simple: <!DOCTYPE html> The doctype is not an HTML tag. It is a declaration. It tells the browser the version of HTML.
5
What is html? HTML stands for Hyper Text Markup Language and is the primary language for building and creating web pages HTML is a markup language that uses markup tags which describe or define content in a Web document. (It is not a scripting or a programming language) HTML documents contain HTML tags and plain text which are often simply called web pages
6
HTML Code HTML code is often referred to as source code.
HTML can be coded using a plain text editor. When using a text editor, save the HTML document using the file extension .html or .htm
7
Rules for html tags HTML tags are keywords (tag names) and are enclosed inside angle brackets like <html> HTML tags occur in pairs with an opening and closing tag like <body> and </body> The first tag in a pair, the opening <body> indicates the start tag The second tag, the closing </body> indicates the end tag, and the end of the body section. The closing tag is written like the start tag but with the forward slash before the tag name. </body> The forward slash (/) ALWAYS precedes the tag name in a closing tag.
8
HTML Tags The text between the HTML tags is keyed in plain text
The following tags DO NOT have pairs and are often called “empty tags”: <br>, <hr>, <img>, <meta> (These tags do not have information that you would put between an opening and closing tag) While HTML tags are not case sensitive, they are generally keyed in all lowercase letters.
9
What is an html element? An HTML element consists of everything between the start tag and the end tag, including the tags. For example: <h1>This is heading style 1</h1>
10
HTML Attribute An HTML attribute gives elements additional meaning and context The image tag requires the src (source) attribute and the alt (alternative) attribute. The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The user defines the text in the alt tag.
11
What is an attribute? Attributes - provide additional information about tags and control how the tag will be interpreted by the browser.
12
ATTRIBUTES Tags can have multiple attributes.
Attributes have syntax rules: Attributes are entered inside the opening tag but not in the closing tag. Attributes are keyed in name/value pairs. Syntax: name=”value” The attribute should have an equal symbol followed by the value or setting for the attribute. Attribute values are enclosed within quotation marks.
13
Minimum html document <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document </body> </html>
14
Two sections in a web page
An HTML document consists of two sections the <head> and the <body>. The <head> section contains information about your page. The <title> displays in the web browser title bar—not in the actual web document. The title must be in the <head> section. The <meta> tag provides additional information about the document. Internal and External CSS files are referenced in the <head> section. The <body> section contains the visible content of your page.
15
Html5 and audio HTML 5 introduced a standard way to embed an audio file on a web page using the <audio> tag. The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format. Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg
16
Web browser The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user.
17
Html5 and video HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg The purpose of the <object> element is to support HTML helpers (plug-ins). Plug-ins are often used by browsers to play audio and video. Examples of well-known plug-ins are Adobe Flash Player and QuickTime. Plug-ins can be added to Web pages through the <object> tag or the <embed> tag.
18
A simple text editor can be used for coding a Web page.
Writing html code A simple text editor can be used for coding a Web page. Using a text editor is a good way to learn coding. Web editors are also used for coding. There are a variety of tools available for creating a Web page. These tools include web editors (such as Dreamweaver) to website builders to WordPress themes. There are free tools and expensive tools. Websites can be built with little actual HTML knowledge.
19
Saving a file When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you. Save the file in a folder that is easy to remember Keep filenames short and descriptive. Avoid using spaces in filenames. Show students URLs and discuss how the path identifies the location of a document
20
Previewing the file Open the HTML page in a Web browser to preview it.
You should view your page in multiple Web browsers. Most likely it will not look exactly the same in every Web browser. Once the document is saved as .htm or .html it will associate with the default web browser
21
Learn some codes. Next step…..
At this point you may want to go to and use the tutorials or the TryIt editors
Similar presentations
