Hello and welcome!
WIX haS CHANGED ALL OF MY less then signs to < or something, keep that in mind while using this, greater then is fine.
This tutorial uses windows OS.
First thing you need
Make a .html file, call it whatever you want, you can use WINDOWS_KEY + R and type in
Notepad or Notepad++
Once you opened the HTML tags and closed them make sure your file is in html format.
What you need to know about HTML is that everything you open- you have to close:
1.
Now you can edit it in your favorite editor (Sublime,Notepad++,notepad,Atom…)
Make sure (if you can) that ENCODING is UTF-8 so you don’t have any problems with characters.
Open the head tag and close it, in it you can add title, also in the HEAD tag there will be script or style tags or so.
To Head you can add title you want, just make sure you close it.
Open the body tag and close it.
Now you can add your first header.
2.
I’ve renamed the webpage name and added the paragraph for you to see how that
can work, i added B tag for BOLD and I tag for ITALIC
Then I displayed the BR tag and HR tag. BR is for a break,newline of sorts,
and HR is for a line.
Then i showed you how H1 header can be renamed to H3 and it changes in size, just like
in microsoft word.
3.
In order to display the relevance of closing your tags, i left it for a second unclosed.
This way you can see (In green) that our BODY and HTML now belong in a comment,
mening they won’t be properly closed. Then i fixed this.
After that i displayed an example of an attribute using P HIDDEN where “hidden” part is
an atribute of P as a paragraph, that’s why you close it with
Now i displayed how , when previewing your webpage you can use INSPECT ELEMENT to view
the secret message.
Now i purposely made an error, well sort of. By typing in A HREF=”WWW.GOOGLE.COM” HTML did not
recognize www.google.com as a website because we did not add a protocol. Protocols for websites
are HTTP and HTTPS (in this example it is HTTPS -google is secure)
“Google link” is now blue, and underlined, because it links us to whatever we wrote in href=….
Page does not open, it takes us to a directory www.google.com which does not exist.
Now we added https: to www.google.com
5.
Now we removed the google link and put my (premade) html2.html file as a link
Once we click it it opens the other webpage.
Then we move back to head to add STYLE tag.
Now we are writing CSS
We added the background color to h1 (grey) and now:
6.
Now I decided to add an atribute to h1 :
7.
This can also be done with CSS. This aligns the text of the title to center.
Now lets change the whole body text color to red:
8.
Now lets change “big” from a paragraph down to blue,without changing
anything else.
9.
Now let’s make a list.
10.
UL presents a list holder ,while LI presents data, LI doesn’t have to be the case.
You can pick other ones, there is a numeric counting, LI presents data with dots.
Now that we’ve done that let me show you how to link CSS,
by pasting the stuff we wrote in STYLE into style.css file we created and deleting the STYLE tags from
our html file, we can link our HTML file to the CSS with:
11.
Since they are in the same map, it works. Nothing changed because we still have the
same data, then we changed our H1 background color from style.css to say BLUE.
1.
<html> </html> -opened and closed HTML tag
2.
Code so far:
<html>
<head>
<title>Ugliest webpage in the world</title>
</head>
<body>
<h1>Title of our webpage</h1>
</body>
</html>
3.
Now i wrote a comment: <!–This is a comment –>
4.
</p> and not </p hidden>
5.
Code so far:
<html>
<head>
<title>Ugliest webpage in the world</title>
</head>
<body>
<h1>Mike’s webpage</h1>
<a href=”https://www.google.com”>Google link</a>
<p> small <b> paragraph </b> </p>
<hr>
<p>big <i>paragraph</i></p>
<p hidden>This is hidden </p>
<!– This is a comment –>
</body>
</html>
6.
h1 {
background-color: grey;
}
7.
<h1 align=”center”> …..
8.
<body text=”red”>
9.
Code so far:
<html>
<head>
<title>Ugliest webpage in the world</title>
<style>
h1 {
background-color: grey;
}
</style>
</head>
<body text=”red”>
<h1 align=”center”>Mike’s webpage</h1>
<a href=”html2.html”>My webpage</a>
<p> small <b> paragraph </b> </p>
<hr>
<p><font color=”blue”>big </font><i>paragraph</i></p>
<p hidden>This is hidden </p>
<!– This is a comment –>
</body>
</html>
10.
<ul>
<li>Mike </li>
<li>Jennifer </li>
</ul>
11.
(in the head)
<link rel=”stylesheet” type=”text/css” href=”style.css”>
