HTML STACK UP
HTML means Hyper Text Markup Language.HTML is the language understood by the web browser [chrome, safari, internet explorer, Mozilla Firefox].
For basic coding you need;
1.Editor[Notepad or Visual Studio Code VSCode]
2.Browser[Chrome, Safari, Firefox, OperaMini, Edge]
HTML SYNTAX
<html>
<head>
<title> Tclassified.com </title>
<body> Education technology and Ict </body>
</head>
</html>HOW TO SAVE
Click “save as”
Make sure you start and end with “html”
Make sure you save with “all files”.
HTML TAGS
<h1></h1> => (TO MAKE THE FONT BIG AND BOLD)
<center></center> => (TO BRING THE FONT TO THE MIDDLE)
<br> => (BREAK TO THE NEXT LINE)
<img src = "pic.jpg">
<a href ______.html></a> => (TO LINK TAG)
<abbr title="A much longer description">Something Abbreviated</abbr><br>
<acronym title="as soon as possible">ASAP</acronym><br>
<b>I want this to be bold</b><br>
<big>This is going to be Big</big><br>
<blockqoute>Indent me and show I'm important</blockqoute><br>
<center>Center Me Please</center><br>
<em> I like being italicized</em><br>
<i>I like being Italicized</i><br>
<p>This is a big Paragraph. Really it is</p><br>
<q>You can qoute me on that</q><br>
<s>I've been struck</s><br>
<small> I feel so small</small><br>
<strong>I'm the strongest</strong><br>
<sub>I'm the subsrcipt</sub><br>
<sup>I'm the superscript</sup><br>
this is my first website<br>
<img src=pic1.jpg height=200 width=200>
TEXT
HTML FORMATTING
HTML formatting helps in adding attributes to our text in HTML webpages .Below are some text formatting tag;
1) BOLD => <b>
2) SUBSCRIPT => <sub>
3) ITALICS => <i>
4) UNDERLINE => <u>
5) SUPERSCRIPT => <sup>
6) MARKED => <mark>
7) DELETED => <del>
8) <center></center>
HTML WEBSITE WITH VARIOUS WEB PAGES
BASIC INSTRUCTIONS
- Save all html files with the suffix “.html”, for the computer to recognise that it is a HTML file(E.G home.html).
- Save all CSS file with the suffix “.css”, for the computer to recognise that it is a CSS file(E.G style.css).
- In cases where pictures are needed, get pictures from your system and put them in the folder where you are working from.
- Make sure the suffix of the picture(.jpg, .jpeg), corresponds with the suffix on the code.
HOME PAGE
<html>
<link rel = "stylesheet" type = "text/css" href ="style.css">
<head><title>Tclassified </title></head>
<body bgcolor=yellow>
<a href = index.html>HOME</a>
<a href = aboutus.html>ABOUT US</a>
<a href = services.html>SERVICES</a>
<a href = help.html>HELP</a>
<center><h1>Tclassified.com</h1></center>
Educational Technology and ICT<br>
<img src = pic1.jpg height="400" width="400">
</body>
</html> ABOUT US
<html>
<link rel = "stylesheet" type = "text/css" href ="style2.css">
<head><title>Tclassified</title></head>
<body bgcolor=red>
<a href = index.html>HOME</a>
<a href = aboutus.html>ABOUT US</a>
<a href = services.html>SERVICES</a>
<a href = help.html>HELP</a>
<center><h1>ABOUT US</h1 ></center>
this is a standard learning website<br>
<img src = pic1.jpg height="400" width="400">
<p><em>click hear to download some video tutorials
<a href="pic2.jpg" download></em></p><br>
</body>
</html> SERVICES PAGE
<html>
<head><title>Tclassified </title></head>
<body bgcolor=blue>
<a href = index.html>HOME</a>
<a href = aboutus.html>ABOUT US</a>
<a href = services.html>SERVICES</a>
<a href = help.html>HELP</a>
<center><h1>SERVICES</h1></center>
This is Tclassified and we offer the best services for Educational Technology and ICT<br>
here you can get reliable source of information on Educational Technology and ICT that will enable you become a professional<br>
<center><img src = pic1.jpg height="150" width="150">
<img src = pic2.jpg height="150" width="150">
<img src = pic3.jpg height="150" width="150">
<img src = pic4.jpg height="150" width="150"><br>
<img src = pic5.jpg height="150" width="150">
<img src = pic6.jpg height="150" width="150">
<img src = pic7.jpg height="150" width="150"></center>
</body>
</html> HELP PAGE
<html>
<link rel = "stylesheet" type = "text/css" href ="style2.css">
<head><title> Tclassified</title></head>
<body bgcolor=purple>
<a href = index.html>HOME</a>
<a href = aboutus.html>ABOUT US</a>
<a href = services.html>SERVICES</a>
<a href = help.html>HELP</a>
<center><h1>HELP</h1 ></center>
For your best Knowledge on your various subjects/courses and Technological problems,
Contact us via ; +2347067162698
</body>
</html> CSS PAGE 1
body{
background-color : yellow;
background-image : url(pic3.jpg)
}
h1{
font-size : 20px
font-style : arial black;
color :red;
text-align: center;
}CSS PAGE 2
body{
background-color : red;
background-image : url(pic14.jfif)
}
h1{
font-size: 20px
font-style: arial;
color: red;
}To learn more on HTML contact us via ; +2347067162698