Introduction to FrontEnd

Introduction to HTML

Basic Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My first website</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first HTML site.</p>
  </body>
</html>

Introduction to HTML

Basic Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My first website</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first HTML site.</p>
  </body>
</html>

<!DOCTYPE html>

👉 The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in.

<!DOCTYPE html>
<html>

</html>

👉 <html> tag indicates that this web page is written in HTML.

<!DOCTYPE html>
<html>
  <head>

  </head>
</html>

👉 the <head> element contains title and meta data of your web document.

<!DOCTYPE html>
<html>
  <head>
    <title>My first website</title>
  </head>
</html>

👉 <title> tag contains the web page title.

<!DOCTYPE html>
<html>
  <head>
    <title>My first website</title>
  </head>
  <body>

  </body>
</html>

👉 the <body> tag contains the content and its structure of your entire web page.

<!DOCTYPE html>
<html>
  <head>
    <title>My first website</title>
  </head>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>

👉 the <h1> represents the level of heading of your web page. (we'll dip dive on this)

<!DOCTYPE html>
<html>
  <head>
    <title>My first website</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first HTML site.</p>
  </body>
</html>

👉 the <p> is simply a paragraph text that can be displayed at anywhere on your page. 🙂

For now, let's use "inline" CSS

You most likely remember our tag attributes from some of the tags, don't ya?

<html>
  <head><title>Inline CSS</title></head>
  <body>
    <p>This is unstyled text</p>
    <p style="color: blue">This text is blue</p>
    <p style="color: red; background-color: yellow">
      Multiple properties can be separated by semicolons
    </p>
  </body>
</html>

#2 class of FED