HTML5
HTML is the starting point of web development and software engineering. See it as fun because it is actually fun and a starting point of a very lucrative career.
You need only to be focused and determined to succeed to do it. The course is practical and practice based, therefore you will need the materials below.
Course Materials
Before you start this course, you will need a pc or laptop and an editor.
We all know what is a pc and laptop but may not know what an editor is.
The editor is a tool, a piece of programming software that enables us to write and edit our program. You need them in this course because the course is practical and practice based.
One good thing about programming and software engineering is that most if not all the tools and materials are free, but you need to devote the time, concentration and determination to succeed as the rewards and benefits are great.
I am recommending two editors and both of them are free:
- Atom
1. Windows – Go the atom.io to download it, then click on AtomSetup.exe, follow the instructions and allow the program to complete and it will be set up and will be lunched on your computer. Your system will be updated as soon as new versions becomes available.
2. If you are using Mac, you need to download the atom–mac.zip from the Atom.io, extract it and drop it into your Application folder and it will run for you.
2. Visual Studio Code
Windows – Go to visualstudio.com and download the installer. click on the (VSCodeUserSetup-{version}.exe), accept the agreement and follow the instructions and it will install it for you.
Mac – Go to visualstudio.com and download the installer. extract it and drop it into your Application folder and it will run for you.
Introduction
The HTML is not a programming language for developing web applications. It is rather a mark-up language which enables developers to organise their program in a machine sensible form.
It is the first point for any developer of web applications because all program and applications are organised with the HTML. Most other programming languages are imbedded into the HTML.
The HTML stands for “Hyper Text Markup Language”. It was developed by Tim Berners-Lee, Robert Cailliau, and others in 1989.
It is used to design the feel and look of the website or application. More sophisticated designs are done with the aide of the CSS.
You can design and host your website with HTML but it may not be very interactive like the ecommerce. You will need the power of the php, JavaScript, python or any other programming language.
It is easy to learn and understand because it uses just tags and elements. You only need the opening tag and closing tags – <tag></tag>. Again, it is the easiest way to get into web development and software engineering because you learn the concept while learning your HTML. The tags and elements tells the HTML how to display the pages.
Don’t worry if you do not understand this, it will make more sense as we go on the course.
Overview
Every HTML document start with:
<!DOCTYPE html>
<html></html>
<head></head>
<body></body>
Notice each element started with opening and closing tags. And they are arranged or organised in this manner:
<!DOCTYPE html>
<html>
The title and other elements goes here.
<head>
</head>
<body>
The content goes here!
</body>
</html>
Syntax
When the document is set up, each page or document must be saved with the .html or .htm prefix. The first page which will be considered as landing or home page must be saved as index.html or index.htm. Your second page will probably be the ‘About Us page’ and it should be written ‘about.html or about.htm.
The document heading tags
This tag starts from <h1> to <h6>. It is used to format document size and can be changed with the css. The biggest is <h1> and the smallest is <h6>
<!DOCTYPE html>
<html>
<head>
<title>Conqueror</title>
</head>
<body>
<h1>I am the Conqueror</h1>
<h2>I am the Conqueror</h2>
<h3>I am the Conqueror</h3>
<h4>I am the Conqueror</h4>
<h5>I am the Conqueror</h5>
<h6>I am the Conqueror</h6>
</body>
</html>
HTML Elements
The elements starts from the opening to the closing tag. The elements are everything within the tags including the properties. However, HTML element and HTML tag are interchangeable.
Example: <title><h2>I Am More Than A Conqueror</h2></title>
Attributes
The attributes defines additional properties of the elements such as page links, images sizes and etc.
<img src=”images/home.jpg width=”30″ height=”30″ alt=”Smiley”>
<a href=”https://www.tjicom.com/”>Home</a>
<abbr title=”Hyper Text Markup Language”>HTML</abbr>
<input type=”text” name=”name” value=”Enter Your Name”>
HTML Paragraphs
The HTML paragraph is defined by a <p> and end with another </p>. It allows texts to be formatted and easy of reading.
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraph</title>
</head>
<body>
<p>I am the conqueror. I can do all things through Christ who strengthens me.</P>
<h3>Add HTML Line Breaks to start a new line</h3>
<h3>Add HTML Horizontal Rules</h3>
<hr>
<br> // Another line break.
<h3>The HTML <pre> Element to print preformatted text</h3>
<pre>I can do all things through Christ who strengthens me because I am an overcomer!</pre>
</body>
</html>
HTML Links
The hyperlink is a connection which allows web users to navigate from one page to the other and from one website to another. A link can be an image, audio or video clip, document link or html link. A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link
The syntax for a link is: <a href=”url“>Link text</a>
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Usually, a link is opened in the current browser unless specified. A link can be directed to open in the:
- _self – Default.- Opens in the same window/tab,
- _blank – Opens the document in a new window.
- _parent – Opens the document in the parent frame
- _top – Open document in the full body of the window
<a href=”https://www.google.com/”>Google</a>
<a href=”/about-us.php” target=”_top”>About Us</a>
<a href=”https://www.tjicom.com/” target=”_blank”>Home</a>
<a href=”images/logo.jpg” target=”_parent”>
<img src=”logo.jpg” alt=”TjiCom”></a>
We can also create any anchor to move from one section of the page to another:
a href=”#sectionA”>Jump to Section A</a>
<h2 id=”sectionA”>Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
Text Formatting
HTML provide various ways for formatting texts for quality design and easy of reading. We will learn below some of the ways we can format our texts:
<p>Show <b>bold text</b>.</p>
<p>Show <strong>strongly highlighted text</strong>.</p>
<p>Show <i>italic text</i>.</p>
<p>Show <em>emphasized text</em>.</p>
<p>Show <mark>highlighted text</mark>.</p>
<p>Show <code>computer code</code>.</p>
<p>Show <small>smaller text</small>.</p>
<p>Show <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>Show <del>deleted text</del>.</p>
<p>Show <ins>inserted text</ins>.</p>
<address>
London School of Computer Sciences<br>
Biafra Innovation Centre<br>
London, UK.
</address>
HTML Styles
The html styles are used to improve presentation of the websites. That could be the fonts, colours, alignment of texts and images, borders, backgrounds and other elements. The styles can be:
- Inline Styles;
- External Styles; and
- Embedded Styles.
Inline Style Sheet – putting the CSS rules directly into the start tag.
External Styles – External style sheet holds all the style rules in a separate document that you can link from any HTML document on your site.
Embedded Styles – This is a style sheet declared in the head section of the document and apply only to the document to which it is referred to.
Inline Styles
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Inline Styles in HTML</title>
</head>
<body>
<h1 style=”color:red;font-size:30px;”>I am the Conqueror</h1>
<p style=”color:green;font-size:18px;”> I am the Conqueror.</p>
<div style=”color:green; font-size:18px;”> I am the Conqueror.</div>
</body>
</html>
Embedded Styles
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Embedded Styles</title>
<style type=”text/css”>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
<body>
<h1>I am the Conqueror</h1>
<p>I am the Overcomer.</p>
</body>
</html>
External Style Sheets
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>External Style Sheet</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<h1>I am the Conqueror</h1>
<p>I can do all things through Christ who strengthens me..</p>
</body>
</html>
Importing External Style
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Importing Style Sheet </title>
<style type=”text/css”>
@import url(“css/style.css”);
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>I am the Conqueror</h1>
<p>I can do all things through Christ who strengthens me.</p>
</body>
</html>
HTML Images
Images are found everywhere in the websites to show reality or accurate information of a situation. It is also used to improve design and appearance of the websites and pages.
The syntax for images is:
<img src=”Path to image” alt=”Alternate text”>
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
- src – Specifies the path to the image
- alt – Specifies an alternate text for the image
<img src=”logo.jpg” alt=”Our company name”>
Setting the Width and Height of an Image
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src=”img.jpg” alt=”Our Company” width=”400″ height=”500″>
</body>
</html>
HTML5 Picture Element
The HTML5 brought the option to scale images up or down to fit all devices. It gives the developer the flexibility to specify image resources.
<picture>
<source media=”(min-width: 1000px)” srcset=”logo-large.png”>
<source media=”(max-width: 500px)” srcset=”logo-small.png”>
<img src=”logo-default.png” alt=”My logo”>
</picture>
Working with Image Maps
Creating image map is to provide an easy way of linking various parts of an image without dividing it into separate image files.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Creating Image Maps in HTML</title>
</head>
<body>
<img src=”images/objects.png” usemap=”#objects” alt=”Objects”>
<map name=”objects”>
<area shape=”circle” coords=”137,231,71″ href=”/examples/html/clock.html” alt=”Clock”>
<area shape=”poly” coords=”363,146,273,302,452,300″ href=”/examples/html/sign.html” alt=”Sign”>
<area shape=”rect” coords=”520,160,641,302″ href=”/html/book.html” alt=”Book”>
</map>
</body>
</html>
HTML Tables
Tables are organised in rows and columns. They are used like the spread-sheet to organise information in tables like financial statements, personnel records, products and customer information.
The table is created with the <table> tags at the beginning and end </table>. The headers with <th> and the rows with <tr>.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Creating Tables in HTML</title>
</head>
<body>
<h2>HTML Table (Default Style)</h2>
<table>
<tr>
<th>Student No.</th>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>1</td>
<td>Conqueror</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Overcomer</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>Favour</td>
<td>11</td>
</tr>
</table>
</body>
</html>
Spanning Multiple Rows and Columns
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Span Multiple Columns in an HTML Table</title>
<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>Spanning Columns</h2>
<table>
<tr>
<th>Name</th>
<th colspan=”2″>Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Span Multiple Rows in an HTML Table</title>
<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>Spanning Rows</h2>
<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan=”2″>Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Table Header, Body, and Footer
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>HTML Table with a Header, Footer and Body</title>
<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Code</th>
<th>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Computers</td>
</tr>
<tr>
<td>002</td>
<td>Keyboard</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>003</th>
<td>Cars</td>
</tr>
</tfoot>
</table>
</body>
</html>
HTML Lists
The HTML has three ways of listing information to the readers to make the information readable and easy to understand:
- Unordered list — listing of related items in no particular order.
- Ordered list — listing of related items, in a specific order.
- Description list — list of terms and their descriptions.
Unordered Lists
The unordered list start with the <ul> and <li> tags and end up with the same closing tags </li></ul>.
<ul>
<li>I am a conqueror</li>
<li>I am an overcomer</li>
<li>I can do all things</li>
</ul>
Ordered Lists
The unordered list start with the <ol> and <li> tags and end up with the same closing tags </li></ol>.
<ol>
<li>I am a conqueror</li>
<li>I am an overcomer</li>
<li>I can do all things</li>
</ol>
You can start from any number
<ol start=”10″>
<li>I am a conqueror</li>
<li>I am an overcomer</li>
<li>I can do all things</li>
</ol>
Description Lists
The unordered list start with the <dl> , <dd >, <dt> tags and end up with the same closing tags <dd >, <dt> and </dl>.:
<dl>
<dt>Name</dt>
<dd>I am the Conqueror.</dd>
<dt>Faith</dt>
<dd>I am the greatest success.</dd>
</dl>
HTML Forms
Forms are used to collect information about users such as name, email and other personal details including interests.
They contain such elements as inputs for texts, checkboxes, radio-buttons, submit buttons
To create a form we need the opening and closing form tags:
Form elements
<form>
Elements
</form>
The <input> Element
Text Fields
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname”>
</form>
Radio Buttons
The <input type=”radio”> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<form>
<input type=”radio” id=”male” name=”gender” value=”male”>
<label for=”male”>Male</label><br>
<input type=”radio” id=”female” name=”gender” value=”female”>
<label for=”female”>Female</label><br>
<input type=”radio” id=”other” name=”gender” value=”other”>
<label for=”other”>Other</label>
</form>
Check-boxes
The <input type=”checkbox”> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type=”checkbox” id=”subject” name=”subject” value=”economics”>
<label for=”eonomics”>I have a bike</label><br>
<input type=”checkbox” id=”computer” name=”computer” value=”Computer Science”>
<label for=”computer”>Computer Science</label><br>
<input type=”checkbox” id=”accounts” name=”accounts” value=”Accountancy”>
<label for=”accounts”>Accountancy</label>
</form>
<form>
<label for=”address”>Message:</label>
<textarea rows=”3″ cols=”30″ name=”address” id=”address”></textarea>
</form>
HTML5 Doctype
The <!DOCTYPE html> is the first instruction informing the browser that the document is HTML5 and this will determine how the browser will handle the rendering of the application.
The HTML specification requires a document type which enables the browser to understand how to display information on the client’s browser.
HTML Layout
The websites or pages usually have the header, body and footer. The designer determines the look and feel of the website. However, the doctype which is the specification which will determine how it will be rendered in the browser.
HTML DIV
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>HTML Div Layout</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
.header {
padding: 10px 20px;
background: #acb3b9;
}
.header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
.nav, .section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
.nav {
width: 20%;
background: #d4d7dc;
}
.section {
width: 80%;
}
.nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
.nav ul li a {
color: #333;
}
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”header”>
<h1>Tutorial Republic</h1>
</div>
<div class=”wrapper clearfix”>
<div class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
<div class=”section”>
<h2>Welcome to our site</h2>
<p>Here you will learn how to create websites…</p>
</div>
</div>
<div class=”footer”>
<p>copyright © tutorialrepublic.com</p>
</div>
</div>
</body>
</html>
CSS Design
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>CSS Template</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: “”;
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout – makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Style Type</h2>
<p>This will be a responsive design.</p>
<p>You will see the effect when you run it in the developers mood</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>I can do all things through Christ who strengthens me. Praise God..</p>
<p>The Lord is our shepherd and we shall not want!.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
HTML head Element
The HTML head element is donated by the <head> tags. Both opening and the closing tags. The describe the meta data, the title and all relevant information necessary for the browser to effectively display the site and allow the google and other search engines to locate your site and sometimes linking your site to external scripts.