Intro to HTML

Intro to HTML

What is HTML?

  • HTML stands for HyperText Markup Language
  • A markup language is a language with specific syntax that gives instructions to a web browser about how to display a page
  • HTML does not describe the style and formatting of content, but only the content itself and its meaning

Intro to HTML

What is HTML?

  • HTML is composed of a series of elements.  Elements define the semantic meaning of their content. Elements include everything between two matching element tags, including the tags themselves.

Intro to HTML

Basic HTML Example

<p>This is a sentence.</p>
<p><strong>This sentence is in bold print.</strong></p>

This is a sentence.

This sentence is in bold print.

Intro to HTML

The Anatomy of a Basic Web Page 

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>This is a basic web page with no styling</p>
    </body>
</html>

Intro to HTML

Let's break it down...

<!DOCTYPE html>
  • This is referred to as  a Doctype Declaration.
  • This must come before anything else in an html document.

Intro to HTML

Let's break it down...

<html>
</html>
  • This is the primary root tag that all pages are composed from. 
  • This represents the root of the page

Intro to HTML

Let's break it down...

<head>
</head>
  • The <head> element can include a title for the document, scripts, styles, meta information, and more. You will often see the following tags in these elements:
    • <title></title>, <meta />, <style />, <script></script>

Intro to HTML

Let's break it down...

<body>
</body>
  • 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.

Intro to HTML

Completed Page 

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>This is a basic web page with no styling</p>
    </body>
</html>

Intro to HTML

The Document Object Model (DOM)

  • As you can see, the <html> element surround the rest of the document, and the <body> element surround the page content.
  • This structure is often thought of as a tree with branches (in this case, the <body> and <p> elements) growing from the trunk (<html>). This hierarchical structure is called the DOM: the Document Object Model.

Intro to HTML

The Document Object Model (DOM)

Intro to HTML

Made with Slides.com