HTML

HTML 101

This is an introduction to web development for beginner and intermediate students in secondary and high school. In this lessons, students will be introduced to web page development using HTML and CSS. Starting from building their very first web page, they progress to learn about paragraphs, lists, tables, inserting images, audio and video files and hyperlinking while they work on different hands-on practical do-it-yourself projects, several hands-on programming challenges, and assessment quizzes throughout the course. 

Finally they will build a Portfolio website to complete this course.

Students who successfully complete this lesson plan will demonstrate a strong mastery of HTML and CSS syntax, as well as the ability to create their own web sites from scratch. They will be able to create web pages for other projects.

 

Common Vocabularies

  • World Wide Web: A network of computers that share documents with each other.
  • A web page: is a specific collection of information provided by a website and displayed to a user in a web browser.
  • Website: A group of web pages that link to each other.
  • Web browser: A software application (e.g., Chrome, Firefox, Safari) where you can open and interact with web pages.
  • HTML: Short for Hypertext Markup Language. It is used to create web pages using regular text.
  • CSS: Short for Cascading Style Sheets. It is used with HTML to change the appearance of web pages.
  • Elements: HTML markup that is used to format a web page. It usually consists of start and end tags along with any attributes.
  • Tags: These indicate the start and end of an HTML element.

 

A web page is a specific collection of information provided by a website and displayed to a user in a web browser.

A web browser is software application (e.g., Chrome, Firefox, Safari) where you can open and interact with web pages.

HTML stands for ‘Hyper Text Markup Language’

We use HTML to create Web Pages

It defines the structure of web pages hence the name ‘Markup Language’.

HTML specifies all the content that will be present in a web page.

Remember what a web page is?

HTML is the Web

  • All browsers understand HTML. 

A browser is a program for displaying web pages eg: Internet Explorer, Google Chrome, Opera Mini.

  • All web pages are HTML documents.
  • HTML is easy to use and understand.
  • HTML is widely used.

“ The main use of HTML is to create web pages ”

To start coding in HTML you will need to have a code editor/HTML Editor.

A code editor is a program designed specifically for editing source code of computer programs.

There are a a lot of Code Editors out there,

  • Atom
  • Notepad
  • Notepad++
  • Sublime Text
  • Visual Studio Code

You can use any editor to write in HTML code, It is also possible to use inbuilt editors like Notepad in your computer. but for this course we will be using Visual Studio Code.

To begin with, you should save that file in your preferred folder.

Make sure you save the file as an HTML file by adding the HTML extension (.html) after your file name.

Eg: index.html

The HTML extension (.html) helps the editor and browser understand the type of file they are dealing with. The editor will be able to assist you once it knows the type of file you’re editing.

Once your file is saved, you may start coding in HTML by adding this code.


<!doctype html>
<head>
<title>Document</title>
</head>
<body>
<h1>This is my first web page!</h1>
<p>This is Fun</p>
</body>
</html>

 

To view your progress, open your file with any browser after you have added content inside it.

Hurrayy! You have successfully made your first web page.The adventure has just begun, now continue to the next chapters to learn more on HTML STRUCTURE.

 

Happy Coding!!

HTML creates documents in structures.

In creating an HTML document, it is compulsory to follow through a certain structure.

However, this structure can also be related to that we see after an HTML document is created.


<!doctype html>
<head>
<title>Document</title>
</head>
<body>
<h1>This is my first web page!</h1>
<p>This is Fun</p>
</body>
</html>

Notice  the texts highlighted in blue and the one highlighted in red?

The one highlighted in red is known as a HTML document declaration and the ones highlighted in blue are known as HTML tags. We are going to learn more about them in the following chapters.

THE HTML DOCUMENT DECLARATION

<!DOCTYPE HTML>

The HTML document declaration is a statement to notify a browser that it should display a document as per HTML standards.

This will inform the browser of what to expect and will make it ready for the task of displaying the web page.

This is like telling your friend “let us go swimming”. You would definitely expect your friend to wear casual and to carry his swimwear. You would also be willing to go alone if he wears an overcoat!

This is similar to what your document does: telling the browser of what to expect and what it wants in return.

THE HTML HEAD ELEMENT

<HEAD></HEAD>

The HTML head element is a container for details about the web page and is placed between the <html> and <body> tags:

<html>

<head></head>

<body>

The head element contains a title element among other elements.

The title element defines the title of the web page. The title element is added inside the head element:

<head>

<title> HTML Tutorial – Code Galaxy </title>

</head>

This title appears on the top of the browser.

 

THE HTML BODY ELEMENT

<BODY></BODY>

The HTML body element is a container for all the web page content. It is placed after the <head>  </head> tag.

<html>

<head></head>

<body>

Contents of an HTML web page, such as text, images and buttons go here.

</body>

HTML TAGS

<> </>

An HTML tag is a word expression used to define an HTML element to be used in a web page.

An HTML tag is a literal representation of a physical thing called an HTML element.

HTML tags are predefined and consist of a word enclosed in angle brackets ‘<>’.

Examples:

  •  <html>
  •  <head>
  •  <body>
  •  <div>

Opening and Closing Tags

HTML tags usually occur in pairs of opening tags and closing tags.

  • Opening tags are tags that mark the beginning of an HTML element.
  • Closing tags are tags that mark the end of an HTML element.

Opening tags are written by enclosing an element name in angle brackets. The tags in the previous slide are all opening tags: <html>, <head>, <body>, <div>, etc.

Closing tags are written like opening tags, but with a forward slash inserted before the element name: </html>, </head>, </body>, </div>, etc.

Therefore, after inserting content in an HTML tag, you must end with a closing tag.

HTML ELEMENTS

<body> </body>

An HTML element is an individual object in a web page.

A web page comprises of HTML elements. Text, images, videos and other content is in one way or another embedded into HTML elements.

Some of the common HTML elements include:

  • html
  • head
  • body
  • header
  • section
  • footer
  • div
  • img
  • video
  • audio
  • h
  • p
  • a
  • input
  • button
  • select
  • table

And so much more!

To apply any of the elements mentioned, just declare it in your code by enclosing it between angle bracelets and remember to apply a closing tag afterwards.

<a></a>, <div></div>

Empty & Non Empty Elements

Empty Elements:

An empty element is a HTML element which cannot have any content inside it. It cannot contain text or other elements.

Examples include <br>, <input>, <img>, <meta> and more.

In HTML, empty elements do not have a closing tag. They only have an opening tag.

<input type=“text”> <br> ………. Correct! 

<input></input> <br></br> ………. WRONG!

Non-Empty elements:

A non-empty element is a HTML element which can contain text or other elements.

Examples include <body></body>, <div></div>, <table></table> and more.

In HTML, non-empty elements have an opening tag and a closing tag.

<head></head> <header></header> <html></html>

<style></style> <p></p> <td></td>

Nested Elements

A nested element is an HTML element that is contained within another HTML element.

For example:

<div>
<p> This is a paragraph </p>
</div>

 

In the example above, <p> element is a nested element. It is contained inside a <div> element.

Nothing much!

Here, we look at the most important HTML elements that you will find useful. These are to be used in the <body> part of the HTML document.

The following are the basic HTML elements:

  • Heading: <h1> <h2> <h3> <h4> <h5> <h6>
  • Paragraph: <p>
  • Button: <button>
  • Select: <select>
  • Link or Anchor: <a>
  • Image: <img>
  • Table: <table>
  • Division: <div>
  • Horizontal Ruler (<hr>

Heading Element

The heading HTML element is designed to act as a title. It is often bolded and enlarged.

It consists 6 tags that differ according to font-size:

  • Heading 1 <h1>

  • Heading 2 <h2>

  • Heading 3 <h3>

  • Heading 4 <h4>

  • Heading 5 <h5>
  • Heading 6 <h6>

Test to see which suits you best. Heading elements are non-empty elements:

<h1> Apps And Girls </h1>

<h2> NLab </h2>

<h3> Facebook </h3>

<h4> Instagram </h4>

<h5> Musical.ly </h5>

<h6> Snapchat </h6>

Paragraph

The paragraph HTML element is designed to act as a subtitle, caption, subheading and more specifically, a paragraph.

Paragraph elements are non-empty elements:

<p>

          Some text in the paragraph…

</p>

 

Button

The button HTML element is designed to act as an element user can click to perform a particular action.

Button elements are non-empty elements:

<button> Button Text </button>

Example:

<button>submit</button>

Output:

Select

The select HTML element is used to create a drop-down list for people to choose an option from. It is used in forms to get user input.

Select elements are non-empty elements.

<option> tags are nested inside select elements to be the set of options in the drop-down list:

<select> <option> Kinondoni </option><option> Ilala </option>

<option> Temeke </option>

</select>

 

Output:

Anchor

The anchor HTML element is used to navigate through pages. It takes the user to a specific web page once the text or element inside it is clicked. It is represented by the letter ‘a’.

The anchor(a) element is a non-empty element:

<a> element or text </a>

Example:

<a href=“www.appsandgirls.com>Go to Apps and Girls</a>

Image

The image HTML element is used to add a picture in an HTML web page.

The image element is an empty element:

<img>

Example:

<img src=“pic.jpg> </img>

Division

The division HTML element is designed to act as a section in the web page and a container for other elements. It is represented by ‘div’.

Div elements are non-empty elements:

<div> Login Below! </div>

<div> 

<h5> Login Button: </h5>

<button> Enter </button>

</div>

Horizontal Rule

The horizontal ruler HTML element is used to add a horizontal line in an HTML web page.

Example:

<hr>

 

 

HTML attributes are keywords that provide additional information about HTML elements.

HTML attributes are contained inside the opening tags of HTML elements.

<element attributename=“attributevalue>

Different attributes are used in different elements. This means that a particular attribute is not always applicable to all elements.

Basic HTML Attributes

Let us look at the most important and useful HTML attributes:

  • src
  • href
  • alt
  • type
  • style
  • id
  • class

src Attribute

The src attribute specifies a location of an external file in relation to the folder containing your HTML document.

The src attribute is used on few elements including: <input> , <img> , <script> , <audio> and <video>.

The src attribute is used to attach external files (such as videos, audios and images) to a web page.

<img src=“pic.jpg>

<audio src=“diamond-mbagala.mp3></audio>

 

href Attribute

The href attribute specifies a location of an external web page. This could be a web page on the internet or a web page stored in your computer.

When a user clicks on a ‘a element’ <a> with a specified href attribute, he/she will be taken to the specified page.

The href attribute s is used with the <a> tag only.

<a href=“www.appsandgirls.org></a>

<a href=“mysite.html></a>

 

alt Attribute

The alt attribute specifies a substitute text to be used, when an image cannot be displayed.

The alt attribute is used in image elements only (<img>) with some few cases in input elements (<input>).

An image may fail to load due to poor internet connection or failure in locating it. In this case, text will be displayed if and only if it is specified in the alt attribute.

<img src=“logo.png” alt=“Our Logo>

 

type Attribute

The type attribute specifies a type of button, input, etc to be displayed. We will focus on type attribute for button and input elements.

For buttons, type attribute can take ‘submit’ or ‘reset’ values.

<button type=“submit></button> is used for buttons that submit forms while <button type=“reset></button> is used for buttons that clear forms.

For inputs, type attribute can take ‘text’, ‘number’, ‘tel’, ‘email’, ‘date’, ‘radio’, ‘checkbox’, ‘password’, ‘submit’ and ‘reset’ values among others.

  • <input type=“text> is used to let the user enter text, characters and numbers.
  • <input type=“number> is used to let the user enter numbers only.
  • <input type=“tel> is used to create fields to enter phone numbers.
  • <input type=“email> is used to let the user enter characters in the email format (user@domain.com).
  • <input type=“date> is used to let the user enter numbers in the date format (mm/dd/yyyy).
  • <input type=“radio> is used to create radio inputs. These allow users to select one and only one choice out of a list.
  • <input type=“checkbox> is used to create checkboxes. These allow users to select one or more choices out of a list.
  • <input type=“password> creates a password field in which characters entered by the users are shown as bullets or asterisks (***** or •••••).
  • <input type=“submit> defines a input for submitting form data.
  • <input type=“reset> defines a input for clearing form data.

 

style Attribute

The style attribute is used to change properties of an element to affect its appearance on the web page.

The values that go in the style attribute are written in the form:

property : property-value;

Example:

color : orange;

 

  • More than one property can be changed and specified in the style attribute.

This is how these properties are set:

<element style=“property : property-value;”></element>

Example:

<div style=“color : blue; height : 100px; width : 200px;”></div>

You will learn more about these properties and the style attribute when you come across CSS.

 

id Attribute

The id attribute is used to identify an HTML element by giving it a unique name.

ID stands for identity or identification and it is used in the same way in HTML.

  • The id attribute can be used on any element.
  • Two or more elements cannot have the same Id name.

<element id=“id_name></element>

Example:

<div id=“header_logo></div>

 

class Attribute

The class attribute is used to identify many HTML elements by giving them a collective name.

  • The class attribute can be used on any element.
  • Many elements can have the same class name.

<element class=“class_name></element>

Example:

<div class=“round_button></div>

<div class=“round_button></div>

<button class=“round_button></button>

 

id names and class names

It is okay to use any character in naming an Id or a class. The following are important to consider:

  • It is not recommended to use hashtags ( # ), colons ( : ) and full stops ( . ). These may have consequences especially when integrating HTML with CSS or JavaScript.
  • It is recommended to start Id and class names with a letter.

Elements and Attributes Formatting

In HTML, the following is how you should write element tags and their attributes:

  • All element tags should be written in small letters:

<input> and not <INPUT>

  • All attributes together with their values should be written in small letters:

<input type=“text”> and not <input type=“TEXT”> , <img SRC=“”>

While HTML does not restrict one from using capital letters, the above format is used to make your codes clear and easier to read.

 

HTML Text Formatting

The two most useful text formats are bold and italic.

To bold text, use the b tags <b></b> 

To italicize text use i tags <i></i> 

<b>Adam</b> will appear as Adam.

<i>lynda.com</i> will appear as lynda.com.

 

HTML comment

An HTML comment is a segment that is made to not be visible on the browser.

Comments can be used to document your codes. And  instead of erasing html elements which may be useful in the future, it is useful to comment them out.

An HTML comment tag looks like this:

 <!– –> where ‘<!–’ is the opening tag and ‘–>‘ is the closing tag.

Example:

<!– I learnt coding at Apps And Girls –>

The text above will not be seen by website visitors.

 

What’s Next?

You have now learned all the basics. What you have learned is enough to build Google.com, Jamii Forums or Kupatana.com.

We recommend that you use div elements ‘<div>’ and nothing else. Div elements are enough to create many layouts. Put text, images and other elements (even divs) in div elements.

Example:

<div>
       <p> Some text here… </p>
      <img src=“image1.jpg” >

</div>

It is now important for you to learn CSS. Fortunately, we have a tutorial on CSS too! CSS in used to create cool appearances, effects and animations.

With that being said, “happy coding!”

Create an Astonishing Homepage

1) Simple Body Layout for About

Try to make your practical page resemble this example at least by 95% since there are some things you can not do with HTML such as the blur. You will know how to put blur with CSS, next topic!

2. Simple Homapage with Header, Body and Footer.

Try to make your practical page resemble this example at least by 95% since there are some things you can not do with HTML such as the blur. You will know how to put blur with CSS, next topic!