TechRoots - Web Development Lesson 1

<!DOCTYPE html>

/* CSS */

// JavaScript

Lesson 1 Part 1

Today Tim will help you create your FIRST website!

Before we start let’s introduce the 3 Languages needed to make a website

HTML- (Hypertext Markup Language) A language used to create Web files that display fonts, colors, text, and links on the World Wide Web (WWW.)

(Materials needed to construct TIM)

CSS- (Cascading Style Sheets) A language that is used to customize the display of the HTML file. (Decorating TIM)

(Decorating TIM)

JavaScript- A Language used to animate the HTML display.

(Making TIM Interactive)

Before we begin, let’s learn about Tags

What is a Tag? A Tag is a keyword inside of a webpage that tells the browser (Google Chrome, Internet Explorer, Safari) how to display images and content. Almost all tags have two parts, an opening and a closing. For example, <html> is the opening tag and </html> is the closing tag

*Make sure you always close your tags*

Different Types of Tags

<html>	Defines an HTML document
<body>	Defines the document's body
<head>	Defines the document's head element
<h1> to <h6>	Defines HTML headings

Now let’s tell the computer what type of document we are creating.

<!DOCTYPE html>
<html>

Explanation of code:

<!DOCTYPE html> <!--Tells computer what file we’re making-->
<html> <!--Starts off code for entire web page-->

Every Website needs to start with a HEAD

<head>
</head>

Explanation of code:

<head> - Starts Head (opening tag)
</head> - Ends head (closing tag)

Once we build our head, we can make our body!

When you see body its HTML

<body>
    <h1> My First CSS Example</h1>
    <center> <p> This is a paragraph.</p> </center>
</body>

Explanation of code:

<body> - Starts the body of your website(opening tag)
<h1> </h1> - Words inside this tag are shown on your website
<center> - Centers words within the line
<p> </p> - Paragraph tag
(Words inside a paragraph tag are also shown on your website)
</body> - Ends body (closing tag)

How to end every HTML Document

</html>

Great Job! You are almost done!

Lesson 1 Part 2

Now let’s decorate our entire website!

*All Decorating (CSS) is done in the <head> </head>*

*When we use CSS make sure all the syntax is within the <style> </style> tag*

Let’s Add the CSS !

<style>
  body {
      background-color: #d0e4fe;
  }
  h1 {
      color: orange;
      text-align: center;
  }
  p {
      font-family: "Times New Roman";
      font-size: 20px;
  }
</style>

Explanation of code:

<style> <!--Container for all CSS (Goes in <head>)-->
    body { /* Styling the <body> */
        /* Changing background color to hex-code (a color code)
        for Sky Blue. A Hex-Code is a set of letters and numbers
        that gives you specific color */
        /***Click me to see the color!***/
        background-color: #d0e4fe;
    }
    h1 { /* Styling <h1> */
        /* Color of <h1> text will be orange */
        color: orange;
        /* Text will be centered within the line */
        text-align: center;
    }
    p { /* Styling <p> */
        /* Font will be “Times New Roman” */
        font-family: "Times New Roman";
        /* Size of text will be 20 pixels; px = pixels
        Pixels - tiny dots that make up your screen */
        font-size: 20px;
    }
</style> <!--Ends <style> (closing tag)-->

How to end every HTML Document (if its not already there)

</html>

Great Job! You are done!

Final Code for this lesson

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: #d0e4fe;
    }
    h1 {
        color: orange;
        text-align: center;
    }
    p {
        font-family: "Times New Roman";
        font-size: 20px;
    }
</style>
</head>

<body>
<h1>My First CSS Example</h1>

<center><p>This is a paragraph.</p></center>

</body>
</html>

*End of lesson 1*