HTML
This presentation is the property of its rightful owner.
Sponsored Links
1 / 11

HTML PowerPoint PPT Presentation


  • 122 Views
  • Uploaded on
  • Presentation posted in: General

HTML. Hyper Text Markup Language. What is HTML?. HTML is a language for describing web pages. 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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html

HTML

Hyper Text Markup Language


What is html

What is HTML?

  • HTML is a language for describing web pages.

  • 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

  • HTML uses markup tags to describe web pages


Html tags

HTML Tags

  • HTML markup tags are usually called HTML tags

  • HTML tags are keywords 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

  • Start and end tags are also called opening tags and closing tags


Html documents web pages

HTML Documents = Web Pages

  • HTML documents describe web pages

  • HTML documents contain HTML tags and plain text

  • HTML documents are also called web pages


The purpose of a web browser

The purpose of a web browser

  • The purpose of a web browser (like Internet Explorer or 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:

<html>

<head>

<title> page name</title> <head>

<body> <h1>My First Heading</h1> <p>My first paragraph</p> </body></html>

  • Example Explained

  • 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


The head element

the head element

  • The purpose of the head element is to provide search engines with the name of the web page and to define styles, provide key words and more.

<head>

<title>The name of the page</title><head>

  • Example Explained

  • The elements between <head> and </head> must include a title for the document, and can include scripts, styles, meta information, and more.

  • 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


Editing html

Editing HTML

  • In this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe this is the best way to learn HTML.

  • However, professional web developers often prefer HTML editors like FrontPage or Dreamweaver, instead of writing plain text.


Your first webpage

Your First Webpage

  • <html>

  • <head>

  • <title>The name of the first page</title><head>

  • <body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>

Type it in NOTEPAD

Save as to your folder in My documents as first.html

Open with your browser


Experiment with headings and paragraphs in your first webpage

Experiment with headings and paragraphs in your first webpage

  • Add these headings to your first page

    • <h2>This is a h2 heading</h2><h3>This is a h3 heading</h3><h4>This is a h4 heading</h4>

    • <h5>This is a h5 heading</h5><h6>This is a h6 heading</h6>

      Refresh your page in your browser

      Review the results

  • Add this paragraph

    • <p>This is another paragraph.</p>

      Refresh your page in your browser

      Review the results


Html links

HTML LINKS

  • <a href=“page2.html">This is a local link</a>

  • <a href="http://www.montetabornazaret.edu.ec">This is an external link</a>

  • Copy your page1.html

  • Save as page2.html in the same folder

  • Link both pages

    • In page1 have this link: <a href=“page2.html">Go to page2</a>

    • Do the same for page 2.

    • Refresh and try it out.


Online tutorial

Online tutorial

  • Use this tutorial to make your first web

  • http://www.w3schools.com/html/default.asp


  • Login