1 / 18

HTML

HTML. What is HTML. HTML stands for  H yper  T ext  M arkup  L anguage HTML is not a programming language, it is a  markup language A markup language is a set of  markup tags The purpose of the tags are to  describe page content. HTML Tags. HTML markup tags are usually called HTML tags

lewis-lyons
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML

  2. What is HTML • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • The purpose of the tags are to describe page content

  3. HTML Tags • HTML markup tags are usually called HTML tags • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • 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, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags

  4. HTML • "HTML tags" and "HTML elements" are often used to describe the same thing. • But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags: • HTML Element: • <p>This is a paragraph tag</p>

  5. Browsers • The purpose of a web browser (Chrome, Internet Explorer, Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page

  6. HTML Page Structure • Below is a visualization of an HTML page structure: • <!DOCTYPE html><html> • <head> • <title>First Web Page</title><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>

  7. Explain Page Structure • The DOCTYPE declaration defines the document type • The text between <html> and </html> describes the web page • The text between <body> and </body> is the visible page content • The text between <h1> and </h1> is displayed as a heading • The text between <p> and </p> is displayed as a paragraph

  8. DOCTYPE • The <!DOCTYPE> Declaration • There are many different documents on the web. A browser can only display a document correctly, if it knows what kind of document it is. • There are also many different versions of HTML, and a browser can only display an HTML page 100% correctly if it knows the exact HTML version used in the page. This is what <!DOCTYPE> is used for. • <!DOCTYPE> is not an HTML tag. It is an information (a declaration) to the browser about what version the HTML is written in. 

  9. HTML <html> Tag • The <html> tag tells the browser that this is an HTML document. • The <html> element is also known as the root element. • The <html> tag is the container for all other HTML elements (except for the<!DOCTYPE> tag).

  10. Head Element • The HTML <head> Element • The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. • The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

  11. HTML <title> Tag • The <title> tag is required in all HTML documents and it defines the title of the document. • The <title> element: • defines a title in the browser toolbar • provides a title for the page when it is added to favorites • displays a title for the page in search-engine results • Note: You can NOT have more than one <title> element in an HTML document. • Tip: If you omit the <title> tag, the document will not validate as HTML.

  12. HTML <body> Tag • The <body> tag defines the document’s body • The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. • Note: You only use the <body> tag ONCE!!!

  13. HTML <p> and <br />Tag • The <p> tag defines a paragraph • Browsers automatically add some space (margin) before and after each <p> element. • <p> adds a double space between tags. • The <br /> tag inserts a single line break. • The <br /> tag is an empty tag which means that it has no end tag • Note: Use the <br /> tag to insert line breaks, not to create paragraphs • In HTML the <br /> tag has no end tag.

  14. Let’s do one together

  15. Heading Tags <h1>-<h6> • The <h1> to <h6> tags are used to define HTML headings. • <h1> defines the most important heading (biggest) • <h6> defines the least important heading (smallest) • Let’s add some headings

  16. HTML <hr> Tag • The <hr /> tag creates a horizontal line in a HTML page. • In HTML, the <hr /> tag has no end tag. • Add a <hr> tag to your notepad

  17. Saving HTML • Always when you save a HTML document the file extension (.___) has to be .html • This tells the browsers that it is an internet source • When you are saving the home page of a web site, you always save it as index.html

  18. Assignment • Create a HTML page about yourself • Headings should be: • About Me • Favorite Things • Things that get on my nerves • Must use <p> tags when typing your information • Must use <hr /> somewhere in the page • Must have at least one <br /> • Make sure to close your <body> and <html>

More Related