W5020.11 HTML

From Coder Merlin

Web Design[edit]

What is Web design?

 Web design is the design of web pages through the use of HTML, CSS, and Java Script. Today, we will be using HTML and CSS to create our one websites about social justice.
  • HTML: Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
  • CSS: Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

Today we will be using Repl.it to design out own website.

1. Click on the link below and create an account using the your student emails:

  https://repl.it/

2. Once logged in, click on "new repl"and "HTML, CSS, JS" and create the repl

 Image: 150 pixels] Image: 500 pixels

HTML[edit]

Now you should have the basic HTML Code that looks like this:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

Let's start creating our website. Add the highlighted lines to your code.

<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    
    <h1> This is a header</h1>
    <h2>This is a smaller header</h2>
  </body>
</html>
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What do you notice?

What you just added is called the header. The Header has an "h1" tag, and allows you create the title of your website. At the end, you must add the closing tag, "/h1." If you want a smaller header, replace "1" with any other larger number to create sub-headers.


Let's add a little more to our website, like some sentences. Add the highlighted lines to your code.

<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <h1>This is a header</h1>
    <h2>This is a smaller header</h2>
    <p>This is a paragraph tag</p>
    <p>You can use this tag as many times to create short sentences or long paragraphs based on the theme of your website</p>
  </body>
</html>
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What do you notice?

What you just added is the paragraph tag. The "p" tag allows you to create sentences.

Finally, lets add some pictures to our code...

<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <h1>This is a header</h1>
    <h2>This is a smaller header</h2>
    <p>This is a paragraph tag</p>
    <p>You can use this tag as many times to create short sentences or long paragraphs based on the theme of your website</p>
    <img src ="https://journocode.com/wp-content/uploads/2016/06/htmlCssJS-1140x515.jpg">
  </body>
</html>
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What do you notice?

You have created an image! This tag allows you to add your own images. Just make sure to copy the image link, and make sure that the link is not too long, or else your program may crash!

CSS[edit]

While our website looks great with simple text and images, let's make it more colorful and exciting by using CSS!

On the left side of your repl.it page, there should be all your files for working with HTML,CSS, and JavaScript, click style.css to work in CSS

CSSFileLocations.png

1. First let's change the color of the background with CSS, add the highlighted lines to your code:

body {
  background-color: lightblue;
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What do you notice?
HintIcon.png
Helpful Hint
Repl has different colors that you change choose from with a drop down list. You can either use one of the colors provided, or use a website like this one to choose a color (https://www.w3schools.com/cssref/css_colors.asp)

2 Now lets change the color of our text, add the highlighted lines to your code:

body {
  background-color: lightblue;
}

h1 {
  color: mediumaquamarine;
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What do you notice? Is there a different between using background-color and color?

3. Now lets center the h1 and make it bigger, add the highlighted lines to your code:

body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What do you notice? Try changing the number before px, what does this do?

3. Finally for our h1, lets make a background color and frame around, add the highlighted lines to your code:

body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What do you notice? Try changing the number before px, what does this do?

4. Next, lets add some color to our h2, add the highlighted lines to your code:

body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
h2 {
  color:pink;
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top.

5. Our image looks a little big , add the highlighted lines to your code:

body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
h2 {
  color:pink;
}
img {
  width: 650px;
  height: 300px;
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What happens if you take out the width line? The height line?

6. Now lets edit the paragraphs, add the highlighted lines to your code:

body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
h2 {
  color:pink;
}
img {
  width: 650px;
  height: 300px;
}
p{
  color:white;
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top. Why do you think both of the paragraph lines changed colors?

Classes[edit]

In the previous edit to our CSS code, changed both the paragraphs, but what happens if we want to change only one paragraph? Or what happens if we have multiple images and we only want to change the size of one? This is where classes come in. Classes allow you to add another "name" to a certain element in HTML, and you can access that "name" in CSS to change that element.

Let's go back to our HTML file, this is what it should look like:

<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <h1>This is a header</h1>
    <h2>This is a smaller header</h2>
    <p>This is a paragraph tag</p>
    <p>You can use this tag as many times to create short sentences or long paragraphs based on the theme of your website</p>
    <img src ="https://journocode.com/wp-content/uploads/2016/06/htmlCssJS-1140x515.jpg">
  </body>
</html>

In order to make a class, in the start tag of an HTML line, you add " Class = "class-name" ", the text between the quotes (in this case, class-name) can be changed to whatever you want to call it. Lets look at an example, edit the highlighted line in your code:

<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <h1>This is a header</h1>
    <h2>This is a smaller header</h2>
    <p class = "first-paragraph">This is a paragraph tag</p>
    <p>You can use this tag as many times to create short sentences or long paragraphs based on the theme of your website</p>
    <img src ="https://journocode.com/wp-content/uploads/2016/06/htmlCssJS-1140x515.jpg">
  </body>
</html>
Start button green arrow
Now, "Run" your code by pressing the green button at the top. Did anything change?

Now go back to your CSS file. Lets change only the first paragraph by using its class name. In order to tell CSS that we are looking for a class name, we have to put a . in front of the class name and then followed by brackets, add the highlighted lines to your code:

body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
h2 {
  color:pink;
}
img {
  width: 650px;
  height: 300px;
}
p{
  color:white;
}
.first-paragraph {
  color: blue; 
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top. Which paragraph changed?

The same class name can be applied to multiple elements in HTML and if you edit something in CSS with that class name, all the HTML elements with the class name will be changed. Go back to your HTML file and edit the highlighted lines below:

<html>
  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <h1 class = "title">This is a header</h1>
    <h2 class = "title">This is a smaller header</h2>
    <p class = "first-paragraph">This is a paragraph tag</p>
    <p>You can use this tag as many times to create short sentences or long paragraphs based on the theme of your website</p>
    <img src ="https://journocode.com/wp-content/uploads/2016/06/htmlCssJS-1140x515.jpg">
  </body>
</html>

Now edit your CSS file with the highlighted lines below:

body {
  background-color:lightblue;
}
h1 {
  color:mediumaquamarine;
  text-align: center;
  font-size: 50px;
  background-color: aquamarine;
  border: solid palegreen 10px;
}
h2 {
  color:pink;
}
img {
  width: 650px;
  height: 300px;
}
p{
  color:white;
}
.first-paragraph {
  color: blue; 
}
.title {
background-color: gold;
}
Start button green arrow
Now, "Run" your code by pressing the green button at the top. What changed? Try adding more classes in HTML and editing them in CSS to get the feel!

Your Turn[edit]

 Now its your turn! Using all of the tools you have just learned with Web Design, create your own website about Social Justice! Make sure you add pictures in HTML, and make your website visually pleasing with CSS!

CS ED Week Homepage[edit]

 Congratulations! You have completed all of the HTML and CSS Lessons! Let's reroute back to the homepage, once you have finished creating your own website!

Graphics[edit]

 Or you can click here to go back to graphics!