+2347067162698
tclassified.com@gmail.com

HTML STACK UP

Educational Technology and ICT

Created with Sketch.

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

  1. Save all html files with the suffix “.html”, for the computer to recognise that it is a HTML file(E.G home.html).
  2. Save all CSS file with the suffix “.css”, for the computer to recognise that it is a CSS file(E.G style.css).
  3. In cases where pictures are needed, get pictures from your system and put them in the folder where you are working from.
  4. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

Open chat