Tech Returners Logo

Empowering into Tech

Tech Returners

Introduction to HTML



TR Classroom image

Back
TR Classroom image

Next

Creating an HTML page

  • Task 1
    • Create a folder called techreturners
    • Inside your techreturners folder create another folder called first_site
    • Open your text editor (VS Code that you downloaded from https://code.visualstudio.com)
    • Navigate to the first_site folder
    • Create a file called index.html
    • Write <h1>Hello</h1>
    • Save file
    • Open index.html in Chrome
This is your first line of HTML! It has an open tag and a close tag.
They tell your browser to display the text in-between as a heading.

HTML basics - elements, tags and attributes

  • HTML uses a predefined set of elements for different types of content; they define the semantic value (or meaning) of their content.
  • Elements include two matching tags and everything in between.
  • For example, the "<p>" element indicates a paragraph; the "<img>" element indicates an image.
  • HTML attaches special meaning to anything that starts with the less-than sign ("<") and ends with the greater-than sign (">"). Such markup is called a tag.
  • The start tag may contain additional information, also known as an attribute.
    Attributes usually consist of 2 parts, its name and corresponding value.
  • In the example below, the attribute name is “class”, and the class of the div is “main”.
    <div class="main">

Good code and html layout

  • To write good code, you must properly nest start and closing tags, that is, write close tags in the opposite order from the start tags.
  • Every html document requires this layout
    https://www.w3schools.com/tags/tag_doctype.asp
  • The !DOCTYPE tells you what version of html you’re using (html5, html4 ...)
    With html5 (latest) it’s simple - you just write html
  • Things within the <head>...</head> are used to provide info about the page
  • Only things within the <body>...</body> tags are displayed on the page

  • Task 2
    • Add in HTML doctype declaration to your index.html file
    • Update title
    • Add some elements to the body of the file
    • Save and refresh Chrome to see your changes

Additional Resources


We now move on to explain about Style Sheets (CSS)
Click the link Below



TR Classroom image

CSS