Web Design

April 5, 2025

Click to enroll for April Stream

Live classes, hands-on experience, projects, and certificate

April 5, 2025

May 3, 2025

Click to enroll for May Stream

Live Classes, Hands-on experience, projects, and certificate

May 3, 2025

How the web works

How websites are created

Websites use HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). Content Management Systems (CMS) such as WordPress, Wix, Joomla add a few more technologies such as Javascript.

Your browser receives HTML and CSS from the web server that hosts the site and then interprets this code to create the page you see.

HTML5 and CSS3 are the current versions and all you need to create simple websites.
Complex sites may use a database to store data, and programming languages such as PHP, ASP.Net, Java, or Ruby on the web server.

Structure

Web pages are like electronic forms of newspapers, catalogues, insurance form.

These documents have structure that help you navigate around the document. For example, in a newspaper story, there is a headline (and maybe subheadings), some text, quotes and possibly some images. Structure helps readers understand the stories in the newspaper.

HTML describes the structure of pages

CSS handles the page appearance

JavaScript handles the interactivity

What do you need to start writing HTML codes?

a text editor e.g. Notepad

a web browser e.g. internet explorer, Google Chrome, Mozilla Firefox

An HTML Element is a component of an HTML document that tells the browser how to structure and interpret a part of the document. It usually begins with a start tag, ends with a closing tag and contains content in between the tags. However, some elements, referred to as empty elements, do not contain content nor closing tags (e.g. <br>).

A tag is a keyword surrounded by angular brackets (e.g. <p>, </div>). There are opening and closing tags. They specify the beginning and end of an element and apply special formatting to content, thus influencing how it is displayed on the browser. To further understand, let’s take a look at a sample HTML document below:

Type the code below in your Notepad or text editor software (NotePad on Windows or TextEdit on Mac)

Save As File Name: sample.html

Save as type: All files

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Sample HTML</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<!– Body goes here –->
<script src=”index.js”></script>
</body>
</html>

Open your web browser and press the keyboard shortcut: Ctrl + O

Locate the file and open it

You can now see the appearance of your HTML code

Example Explained

<!DOCTYPE> This is called the DTD (Document Type Declaration). It defines the HTML version used in the document. <!DOCTYPE html> tells the browser it is an HTML5 document.

<html> This element is the root element. All content to be displayed on the web page must be in here. No content should come after the closing tag (</html>).

<head> Content in this element does not appear in the main browser window. It mainly contains information about the HTML document called metadata. It also contains links to stylesheets and other external files.

<title> This element contains the title of the web page. It is displayed in the title bar or on the tab of the web page.

<body> It is the body of the document. It contains all visible contents of the webpage like headings, paragraphs, etc. Everything in this element shows in the main browser window.

<h1> This is the largest heading. Other headings which are smaller exist (h2, h3, h4, h5 and h6). It is displayed as a big bold text.

<p> This is a paragraph element.

HTML Code basics

All HTML Documents must begin with a Document Type Declaration (<!DOCTYPE html> for HTML 5). It must appear only once in the document at the top of the page before any other tag. It is not case sensitive.
The HTML document itself begins with <html> and ends with </html>
The content in the main browser window are contained between <body> and </body>.

The HTML code is made up of characters that live inside angled brackets. These are called elements.

Elements are usually made of two tags: an opening tag and a closing tag.

The closing tag has an extra forward slash in it.

Each HTML element tells the browser something about the information that sits between its opening and closing tags. The tags act like containers.

<h1> This is the main heading </h1>

<h2> This is a level 2 heading </h2>

<h3> This is a level 3 heading </h3>

<h4> This is a level 4 heading </h4>

<h5> This is a level 5 heading </h5>

<h6> This is a level 6 heading </h6>

<p> To create a paragraph, surround the words that make up the paragraph with an opening and closing tag </p>

<p> We can make words appear bold <b> bold </b> and also italicize them <i> italia </i> </p>

<p> There is even subscript and superscript available. On the 25 <sup> th </sup> I saw CO <sub> 2 </sub> in the atmosphere </p>

HTML does white space collapsing. All leading and trailing whitespaces are ignored in HTML. We only indent them to make our work look neater and to show the nesting relationship. Make sure you indent when you write your HTML too

<p> We can incorporate line breaks <br/> to continue writing on the next line and a horizontal rule <hr/> </p>

Notice that they are empty elements with no closing tags

There are some text elements that do not affect the structure of the web page. For example, the content of the <em> is shown in italics and a<blockquote> is usually indented

If you use the abbr tag in this form

<p> <abbr title = “National Aeronautics and Space Administration”> NASA </abbr> </p>, it will bring out a title so you can see the full meaning

<address> <p> 91 Musibau Mujibu street, off Ago Palace Way </p></address>

<p> This tag is used to <del> remove</del> <ins> delete </ins> an unwanted text </p>

<p> <s> works in a similar way</s></p>

A Simple Exercise

In your text editor, write an HTML document to replicate the web page in the image above.
What is the difference between a tag and an element?
Do you think HTML tags are case sensitive?
Do you think HTML is space sensitive?
Find out how to view the HTML source code of any web page on Google Chrome.

HTML Elements

As we’ve previously learnt, an HTML element consists of an opening tag, some content and a closing tag. Examples of HTML elements:
<p>This is a paragraph </p>
<h1>This is a heading </h1>

An HTML element may contain other elements as its ‘content.’ This is called nesting. The nested element(s) are referred to as the child element(s); the element that contains the child element(s) is called the parent element; the child elements next to one another are called sibling elements. Here is an example:
<p>This is a link to Google: <a href = “https://www.google.com”> google.com </a> <span>Search for anything you like there!</span></p>

<p> is the parent element, <a> and <span> are children elements of <p>; they are also siblings to each other.

As in a human relationship, the child elements inherit most of the parent element’s properties. Unline human relationships though, child elements cannot have more than one parent element. Some elements like <br>, <hr>, <img> etc are referred to as empty elements. They do not contain content nor closing tags. Although some HTML elements may display correctly if you forget the end tags, do not rely on that. Always remember to close your tags where it applies.

Semantic and non-semantic elements

Semantic elements are elements that don’t just tell the browser how to display
content on a page, they also indicate the roles the content should play on the page.
They convey meaning both to the developer and the browser. They also help
search engines (like Google, Bing) to identify which content is the most
important on the page.

The diagram beside illustrates some HTML5 semantic
elements and where they should be placed on the page.

Elements like <div> and <span> are non-semantic elements
as they give no information about what kind of content should
be in them.

It is not necessary that all the semantic tags mentioned above must be used in every webpage as in the diagram above. Only use those that are important for your webpage.

The <section> element typically contains a heading and some content beneath it. It should be used for things like introduction, news items, etc.

The <article> element should contain content that is able to stand on its own independent of the rest of the website. Things like product cards or blog posts should go here.

The <aside> element should contain content that is not directly related to the content surrounding it. It functions as a sidebar for things like suggestions or possibly even adverts.

The <header>, <nav> and <footer> elements should contain content like their names suggest.

We’ve already seen that a tag is a keyword surrounded by angular brackets and that there are opening and closing tags. These keywords have special meanings and formatting styles to the browser. There are over 100 tags in HTML. Tags in HTML are not case sensitive, but it is neater to write them in lower case. A closing tag has a forward slash right before the keyword, enclosed in angular brackets. All HTML elements can contain attributes. Attributes usually come in name-value pairs written in the start tags of elements (written as name = “value”). They provide additional information about HTML elements. The value does not necessarily need to be surrounded by quotes, but is good practice to. Global attributes can be used in all tags. Not all attributes are global. Not all attributes come in name-value pairs.

The href attribute is used in the link tag to specify the URL of the page the link leads to.
<a href=“https://www.iprep.com.ng”>Visit iPrep here</a>

The src attribute is mostly used in the image tag to specify the path to (or address of) the image to be displayed. It could be a relative path (e.g. <img src=“myimg.jpg” or src=“/imgfolder/myimg.jpg”>) or an absolute path (e.g. <img src=“https://www.google.com/images/animg.jpg”>).

The id attribute is used in any tag to give the element a unique name/label which cannot be used by any other element in the document. <h1 id=“only-heading”>A Heading</h1>.The class attribute is used in any tag to indicate that the element belongs to the specified class of elements. Many elements can belong to a certain class and as such have the same class name. The id and class attributes are mostly used to identify elements for unique and generic styling respectively. <p class=“paragraph”>Paragraph 1</p>.

The lang attribute is used in the html tag to specify the language of the document.
<html lang=“en”>…</html>

The style attribute is used in any tag to add CSS (Cascading Style Sheet) styling to the element.
<p style=“color:blue;”>…</p>. This makes the color of the paragraph text blue.

The title attribute is used in any tag to add some extra information about the element. It is displayed as a tooltip when the cursor hovers over the element.
<p title=“This is a paragraph”>Paragraph One</p>The hidden attribute is used in any tag to hide an element.
<p hidden>This paragraph is hidden.</p>

Block and Inline Elements

In HTML, every element comes with its own display type. It could either be block or inline depending on what type of element it is.

A block level element always starts on a new line and occupies its full width. Block elements, by default, come with some space before and after them (called margin). Some examples of block elements are <p>, <div>, <h1> – <h6>, etc.

An inline level element does not start on a new line; it only takes as much space as it needs; not necessarily the full width. Examples are <span>, <b>, <em>, <input>, etc.A block element may contain inline level elements. The <div> element functions as a block level container while the <span> element functions as an inline container.

We will now be looking at some elements for special formatting in HTML:

<p> We can incorporate line breaks <br/> to continue writing on the next line and a horizontal rule <hr/> </p>

Notice that they are empty elements with no closing tags

To bolden a text, use <b>This is a bold text</b> or the <strong> element
To italicize a text, use <i>This is an italicized text</i> or the <em> element
To underline a text, use <u>This text is underlined</u> or <ins> element
To subscript a text, use <sub>Subscript</sub>
To superscript a text, use <sup>Superscript</sup>
To mark or highlight a text use <mark>Highlighted text</mark>
To strike through a text, use <del>Strikethrough text</del> or the <s> element
To make a text smaller than regular, use <small>Smaller text</small>

HTML Comments

While writing code, it helps to be able to write a description of some parts of the code in the editor and not have it display on the webpage. This is done by commenting. In HTML, we comment using the syntax <!–This is a comment. It won’t show on the webpage.–>. Some advantages of adding comments to your code:

They can be used to place notifications and reminders in your HTML code.
They can be used to hide content temporarily as opposed to deleting and then needing it later.
They offer great help in debugging as line after line can be commented to hunt the error.
They can be used to hide ANY part of the HTML code.
They can be used to explain parts of the HTML code.

Take note of the exclamation mark only in the starting tag.

HTML Colours

Colors in HTML can be specified using standard predefined color names like blue, green, tomato, coral, firebrick, etc. There are 140 different color names supported by modern browsers.

Colors could also be specified using codes/values:

RGB values use the syntax rgb(255, 0, 255) which stands for red, green and blue, each of which has a maximum value of 255 and a minimum of 0.
Hex values have a syntax starting with # and then followed by 6 characters which could be any hexadecimal number (0-9, a-f).
HSL stands for Hue, Saturation and Lightness. Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage, 0% is black, 50% is neither light nor dark, 100% is white

HTML Favicon

The favicon of a web page is that small image (usually a logo) that is displayed in the tab of a browser right before the page title.

To add a favicon to an HTML document, first save the image in the root directory of your web page or in a folder that is in the root directory. Since it will be quite small, you want the image to be simple. Then in your HTML, add a <link> element as a child to the <head> element using this syntax:
<link rel=”icon” type=”image/x-icon” href=”favicon.png”>
The favicon could be in jpg, gif, png, ico or svg format. Save the HTML file and reload.

HTML Links

An HTML link is an highlighted element (does not always have to be text) that when clicked on takes the user to another location in the same webpage, another webpage in the same website, or another webpage in a totally different website.

We’ve already seen that the <a> element defines a link in HTML. We’ve also seen that the href attribute defines the destination of the link (that is, the URL of the landing page). But before we move on, it is important to note that, by default in all browsers, an unvisited link is underlined and blue, a visited link is underlined and purple and an active link is underlined and yellow (or red). Now, let us look at the target attribute. Every link opens by default on the same page. To change this, you have to specify where the linked page should open using the target attribute.

Set the target attribute to _blank if you want the page to open in a new tab. Example:

<a href=”https://www.google.com” target=”_blank”>Click here</a>

If you want to link a particular location in the same document, called internal linking, put an id attribute in the element you want to link to, then set the href of the link to “#idname”.If the web page you are linking to is in the root directory of your current page, you only need to specify the name of the document as the value of the href attribute. If the webpage is in a folder that is in the root directory of your current page, then you need to specify it as foldername/dumentname.html. These methods of specification are relative to the root directory.

For web pages that are in a totally different location, you need to specify the location in full e.g. https://www.google.com. This is an absolute URL.

To link to an email address, use the syntax: <a href=”mailto:tutorialngr@gmail.com”>Send email</a>.
When clicked, it will open the default mail client and compose an empty message with tutorialngr@gmail.com as the receiver’s email address and then let the user do the rest.

You can also use the title attribute with the <a> element to give extra information about the link as we’ve already seen. To use a button as a link, use the button element: <button onclick=”document.location=’https://google.com‘”>Click Me</button>.
This, however, contains a little Javascript code which we will learn about later.

<p> Movie Reviews </p>

<ul>

<li> <a href = http://www.empireonline.com> Empire </a> <li>

The value of the href attribute should be the absolute url, that is, the full address of the site

When you are linking to the other pages within the same site, you can specify the relative url such as

Email links

We use the <a> to send the email links

<a href = “mailto: tutorialngr@gmail.com”> Email Dipo </a>

To open a link in a new window

<a href = “http://www.imdb.com” target = “_blank”> Internet Movie Database </a> (opens in a new window)

To link to a specific part of the same page, you need to first identify the points in the page that the link will go to.

<h1 id = “top”> Film-Making Terms </h1>

<a href = “#interlude”> Interlude </a><br/>

HTML Images

To add an image to your HTML, we use the <img> tag as shown below

Notice that the img is an empty element as it does not take a closing tag. It usually carries the following attributes

src: this tells the browser where it can find the image file. It could be an absolute or relative URL as we’ve seen previously.
The alt attribute specifies a text that will be displayed if, for whatever reason, the image is unable to load.

Title: the browser will display this as a toottip when the mouse hovers over the image

The width and height attributes specify the width and height of the image. You can also use the style attribute to specify these two properties. Try it out.
Images in different formats can be specified: GIF, ICO, JPG, PNG, SVG, APNG

Loading large images take time and may slow down the webpage. You want to be careful with them,

You can change the image into a link by embedding it in an <a> tag

An image can be placed in the following areas

Before a paragraph
Inside the start of a paragraph
In the middle of a paragraph

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antartic. <img src = “images.jpg” alt = “Bird”, width = “100”, height = “100” /> Many species undertake a log distance

Tips to note in creating images

Save images in the right format jpg, gif or png)
Save images in the right size
Use the correct resolution

Vector images are different from bitmap images in the sense that bitmap images are resolution-dependent

You can increase the dimensions of a vector image without affecting the quality. They are created using popular graphics design software like Adobe Illustrator and CorelDraw.

Animated GIFs show several frames of an image sequence and can be used to create simple animations

HTML Audio

HTML allows for upload of audio files using the <audio> element as in the syntax below:

<audio controls>
<source src=”music.mp3″ type=”audio/mpeg”>
<source src=”music.ogg” type=”audio/ogg”>
The music cannot be played.
</audio>

The controls attribute adds audio controls like play, pause, volume, playback speed etc. Without this attribute, the audio file will not be displayed. There are other attributes that can be included like muted and autoplay. They do exactly what their names imply.

The <source> elements allow for alternative audio files to be specified from which the browser will choose. MP3 (audio/mpeg), WAV (audio/wav) and OGG (audio/ogg) are music formats supported by most major browsers (Safari does not support OGG though). If the <audio> element is not supported by the browser, the text between the <audio> tags will be displayed.

HTML Video

Videos can be included in web pages using the <video> element as in the syntax below:

<video controls width=”320″ height=”240″>
<source src=”video.mp4″ type=”audio/mp4″>
<source src=”video.webm” type=”audio/webm”>
The video cannot be played.
</video>Similar to the <audio> element, the control attribute adds video controls like play, pause, volume, playback speed etc. There are other attributes that can be included like muted and autoplay. They do exactly what their names imply.

Chrome browsers, however, do not allow video or audio to autoplay unless muted. It is also important to include width and height attributes as specified above.

The <source> elements allow for alternative video files to be specified from which the browser will choose. MP4 (audio/mp4), WebM (audio/webm) and OGG (audio/ogg) are music formats supported by most major browsers (Safari does not support OGG though). If the <audio> element is not supported by the browser, the text between the <audio> tags will be displayed.

HTML Plug-ins

Plug-ins are programs that extend the functionality of a browser. They allow for other HTML pages, images, PDF files and other applications to be embedded in the web page. The <object> element is used to implement this. The sample code below illustrates how it works:

Specify the file location in the data attribute. Include width and height attributes to determine the size.

The <embed> element can also be used for this purpose. Find out how it works.

Embedding Youtube

YouTube Videos can be included in HTML documents using the <iframe> element. You could easily right click on the video on YouTube and click on “copy embed code”. Or just copy the video ID (check the video URL for the video ID), then put it in the src attribute of the <iframe> element as in below:

width and height attributes are important but optional. For autoplay, mute and/or controls, add them to the url as in:

src=”https://www.youtube.com/embed/XfXJB1We2wE?autoplay=1&mute=1&controls=0

The default is autoplay=0, mute=0 and controls=1. They don’t need to be specified except preference is otherwise.

Tables

A table shows information in a grid format. Examples include financial reports, sports results, academic results, etc

When representing information in a table, it’s important to think in terms of grids made up of rows and columns.

There are primarily 4 elements needed to draw a table in HTML. First the parent element <table>, then sub elements, table row <tr>, table header <th> and table data <td>. There are many other child elements of the <table> element, but the aforementioned (<tr>) is the most important.

Another important child element is <caption>. It contains the caption of the table and should be inserted as the first child element of the <table> if going to be used at all.

We use the tag <table> to create a table.

Then we indicate the start of a row using <tr>

Each cell is represented using a <td> tag which stands for table data

<th> is used to represent heading for either a column or a row. You can use the scope = ‘row’ or ‘col’ attribute on the <th> tag to indicate a heading for a row or column

<table>

<tr>

<th scope = “col”> Saturday </th>

<th scope = “col”> Sunday </th>

</tr>

<tr> <th scope = “row”> Tickets sold: </th>

</tr> <tr> <th scope = “row”> Total sales: </th>

Sample Table

<table>
<caption> Table of Countries </caption>
<tr>
<th>Country</th>
<th>Size</th>
<th>Military Strength</th>
</tr>
<tr>
<td>Nigeria</td>
<td>200 Million</td>
<td>Average</td>
</tr>
<tr>
<td>USA</td>
<td>Over 200 Million</td>
<td>Very Powerful</td>
</tr>
</table>

As you can see, a default HTML table is quite unattractive. It doesn’t even come with table borders! We’ll talk about styling a table with CSS later on, but for now, you can put borders on your table by adding an attribute border=“1” in the <table> element or by using the style attribute with value “border: 1px solid black;”.

Lists

There are several occasions when we use lists. HTML provides us with three different types:

Ordered lists: here each item is numbered (numerical or alphabetical). They are used for items whose order matters. For example, the list might be steps to prepare a meal or perhaps a legal document where each point needs to be identified by a section number

Defining an ordered list begins with an <ol> tag, then <li> elements which contain the list items one after the other. The list marker style can be changed by including an attribute in the <ol> element as in type=“1”. There are 5 types that can be used:

type=“1” means the list will be marked with numbers. This is the default style.
type=“i” means the list will be marked with lowercase Roman Numerals
type=“I” means the list will be marked with uppercase Roman Numerals
type=“a” means the lost will be marked with lowercase alphabets
type=“A” means the list will be marked with uppercase alphabets. There is another important property in ordered lists that determines which number the list starts from. The default is 1 (or i, a etc) but can be changed by putting an attribute as in start=“3”. Check out the example below. Note that even if the type is not number, the start attribute only works with numbers

<ol> <li> Slice potatoes into cubes </li>

Unordered lists: these types of list begin with a bullet point

then <li> elements which contain the list items one after the other. The list marker style can be changed by including an attribute in the <ul> element as in type=“square”. There are 4 bullet style options: circle, square, disc (default) and none.

<ul>

<li> Freshly prepared okro </li> <ul>

In both list types, nesting is possible. <li> elements can contain any HTML data type including other lists. When nesting an unordered list in an unordered list, the list style is automatically changed. An example of nesting is illustrated below. Take note of where exactly the nested list is placed in the HTML.

<ol>
<li>Angola</li>
<li>Nigeria</li>
<li>Nigeria
<ul>
<li>Hausa</li>
<li>Igbo</li>
<li>Yoruba
<ul>
<li>Edo</li>
<li>Egun</li>
<li>Ibadan</li>
</ul></li>
</ul></li>
<li>Venezuela</li>
</ol>

Definition lists

A description list is a list for which each item contains a description. It is defined in HTML by <dl> elements. In the <dl> element, <dt> defines the term name and <dd> contains a description for the term. An example below:

<dl>

<dt> acceleration </dt>

<dd> This is defined as the rate of change of acceleration with respect to time </dd> <dl>

Nested Lists

This is about putting a list within a list

<ul> Mouses

<li> Pastries

<ul> <li> Croissant </li> <ul

</li>

Forms

An HTML form is basically used to obtain or accept input from a user. The data collected is then often (not always) sent to a sever for processing and a response is given. The <form> element is used to create this. The <form> element itself is only a container of many other different elements which we will talk about soon; these elements specify the visible parts of the form like the place for input, submit button, checkboxes etc.

Now, let us talk about some attributes of the <form> element:

The action attribute specifies the action to be performed when the form is submitted; usually it specifies the URL of a server-side script to which the form data will be sent on clicking the submit button. This script handles and processes the data. <form action=”/process-page.php”>…</form> sends the form data to some process-page.php once the submit button is clicked. If this attribute is not specified, the form simply submits to the current page.

The target attribute specifies where to display the response received after the form has been submitted. As we’ve looked at in Links, _self is the default value which displays the response in the current tab/window while _blank displays the response in a new tab.

The method attribute specifies how the data is to be submitted. There are primarily two HTTP methods by which form-data can be submitted: GET or POST.
method=“get” is the default HTTP method. It appends the form data to the URL in name-value pairs. It must not be used for sensitive information as the URL is publicly accessible by anyone. The length of a URL is also limited to 2048 characters. It is best for non-secure data.
method=“post” appends the data inside the body of the HTTP request. It is not shown in the URL and thus is secure for sensitive information. It also has no limit on the size and can send large data.

Form Input Element

The name attribute, as we already know specifies the name of the form. There are other attributes like accept-charset, autocomplete, enctype, novalidate and rel, but the ones explained above are the most useful.

We will now talk about the several elements that are used in the <form> element.

The <input> element is the most used. It is an empty element. It allows for user input to be obtained in many different ways using its type attribute. Some of the types are explained below:
type=“text” specifies a text input field on a single line. It is the default value.
type=“password” specifies a password field. Data entered into this field will be displayed as dots or asterisk in order to protect it from being seen.
type=“submit” this defines a button which when clicked on, sends the form data to the script specified in the action attribute of <form>.
type=“reset” defines a button which when clicked on, resets all input fields in the >form> to their default values.

type=“radio” defines a radio button which is a type of input that lets a user select not more than one of a number of options.
type=“checkbox” defines a checkbox which lets a user select multiple options out of a number of choices
type=“button” simply defines a button which can be assigned to any special function using Javascript.
type=“color” is used to display a color picker (some browsers don’t support this though) through which a user can choose a particular color.
type=“date” is used for fields that should contain dates. A date picker will be displayed if supported by the browser.
type=“email” is used for input fields that should contain emails. With this attribute, some browsers will automatically validate if an email is being typed in (by the presence of @ and .com)

type=“file” defines a file selection button which allows for a file from the user system to be selected and uploaded.
type=“hidden” defines an input field that is hidden from the user. It allows for data that cannot be seen or changed by the user to be included when the form is submitted. The data can however be seen by any browser with a “view source” functionality and as such is not the best for hiding important data.
type=“number” defines a numeric field in which letters cannot be typed. It also displays up and down buttons for increasing and decreasing the number.
type=“range” defines a range of values, default 0 to 100, and displays a slider to select a number in that range. Should be used when the exact value of a number is not important.
type=“tel” defines a field input for telephone numbers. A regex pattern can be passed to a pattern attribute to make sure it follows the right pattern.

type=“time” defines a field for taking time input. In browsers that support it, a time picker is displayed.
type=“url” is used for URL inputs. The field maybe automatically validated when submitted if the browser supports that.
type=“search” defines a field to be used for entering search entries. It functions similar to the text type.
type=“image” defines an image as the submit button. It should contain a src attribute for the image path, an alt attribute for alternative text and a height and width attribute for proper sizing.

Using the right type attribute in an <input> element can help improve the User Experience of your website. For example, it helps the browser and/or keyboard know which field to suggest what. This means if you’re typing in an email field, your keyboard can know to automatically suggest “@” or “.com”. It also knows to suggest other previously typed emails and not phone numbers. It also adds the appropriate validation to the fields and informs the user to type in a valid email when they’re not doing so. The default input type is text.

Now, we will discuss other important attributes in the <input> element.

The value attribute specifies the initial value an input should have. It is displayed in the input field and may be edited by the user to what he/she wants if applicable.
The readonly attribute makes the input field uneditable. It can be seen and copied, but its content (or value) cannot be modified. It will be submitted alongside others when the form is submitted. This attribute does not come in a key-value pair.
The disabled attribute does not come in a key-value pair. When included, the input is still displayed, but its content cannot be selected nor modified and its data is not captured when the form is submitted.
The size attribute specifies the width of a field in terms of number of characters. The default value is 20. It works with input types text, search, email, password, url and tel.

The maxlength attribute specifies the maximum number of characters an input field can take. Once this number has been reached, the field will not take in any more input.
The min and max attributes work for input types number, range, date, time etc. They specify minimum and maximum boundaries beyond which the input will not be taken. They can be used together or individually as required.
The multiple attribute works with input type file and specifies that the user is allowed to select more than one file.
The pattern attribute specifies a regex (Regular Expression) that is used to validate the value inputed when the form is submitted. It works with input types text, date, search, url, tel, email, and password. It is good practice to include, alongside, a title attribute describing the pattern expected of the user.

The placeholder attribute specifies a short description or hint of the value expected in an input field. It is generally displayed as an highlighted text in the input field and disappears when the user begins typing in the field. It works with input types text, search, url, tel, email, and password.
The required attribute is a keyword attribute that specifies that the particular input must have a value before the form can be submitted. It works with the following input types: text, search, url, tel, email, password, date, time, number, checkbox, radio, and file.
The step attribute specifies a step size for input types: number, range, date and time. If, for example, step=“2” in a number field, this means the input will only be able to take numbers in steps of 2 from the min to the max.
The autofocus attribute is a keyword attribute that puts a particular input field in focus (meaning that it is selected) immediately the page loads.
The checked attribute indicates that the input field would be pre-selected when the page loads. It works for input types checkbox and radio.

The list attribute specifies the id of a <datalist> element which contains some predefined <option> elements. It still allows the user type in what he wants, but it provides some options which the user may choose from. We will talk about the <option> and <datalist> elements soon, but here’s an example. Try running it and see what it does:

The autocomplete attribute determines whether a browser should suggest values as a user types into the field based on previously entered input or not. It can be set = “on” or “off”. Some browsers may still need extra activation in their preferences for autocomplete to work. The attribute can be in the <form> element as well as input types: text, search, url, tel, email, password, date, range, and color.

Other Form Elements

The <label> form element is an inline element that defines a label for other form elements (usually <input>). The for attribute of the <label> should be the same value as the id of the <input> so that the browser will regard them as one and essentially bind them to each other. Run the example below and notice what happens when you click on a particular label:

<form>
<label for=”fname”>First Name</label> <br>
<input type=”text” id=”fname”> <br>
<label for=”lname”>Age</label> <br>
<input type=”number” id=”lname”>
</form>

The <select> element defines a dropdown list using a couple of <option> elements which define the options of the dropdown list. The first <option> element is by default the first element that is pre-selected when the page loads. You can change that by including a keyword attribute selected in any of the <option> elements. Play around with size and multiple attributes in the <select> element and find out what they do.

<form>
<label for=”phones”>Choose your phone</label> <br>
<select id=”phones”>
<option>Samsung</option>
<option selected>iPhone</option>
<option>Pixel</option>
<option>OnePlus</option>
</select>
</form>

The <textarea> form element allows for a multi-line text input. You can include a maxlength attribute to set a limit on how many characters can be typed. rows and cols attributes can also be included to specify how many lines will be visible in the text are and how wide the text area should be. An example below:

<form>
<label for=”message”>Write not more than 500 characters about your
school</label> <br>
<textarea maxlength=”500″ id=”message” rows=”20″ cols=”45″> </textarea>
</form>

The <fieldset> form element groups related fields in a form. It is displayed as an outline around the enclosed elements. The <legend> element specifies a caption for the <fieldset>. The caption is displayed in the top left of the <fieldset> outline. Both can definitely be re-styled using CSS. Here is an example:
<form>
<fieldset>
<legend>Personal Details:</legend>
<label for=”fname”>First Name:</label><br>
<input type=”text” id=”fname” name=”fname”><br>
<label for=”sname”>Surname:</label><br>
<input type=”text” id=”sname” name=”lname”><br><br>
<input type=”submit” value=”Go”>
</fieldset>
</form>

CSS (Cascading Style Sheet) allows you to specify how the content of an element should appear on your page

You write all your styles in one document and link it in all your pages

Multiple Device Compatibility

CSS saves time

It enables pages to load faster

It’s easy to maintain

CSS has superior styles to HTML

body { background: black; color: white }

a {color: gray; }

h1 {font-family: serif; font-size: 100pt}

body, a, h1 above are called selectors in CSS

There are three types of fonts: sans-serif, serif, monospaced (equal width)

You can exaggerate links

a: hover {text-decoration = none, color: black, background = white

.indent {margin-left: 10px}

On the HTML file, specify the tag e.g. <p class = “indent”> Your text </p>

Or <p> <span class = “indent”> The </span>

Media queries

@media (min-width:1000px){body {background: green;}}

.responsive (display: inline-lock; width: 200px; border: 1px;}}

This helps the responsiveness of your website. You are telling the browser to change the colour when the screen gets to a width

Bootstrap neutralizes your web design

<div> tags separates your codes. It defines area in your page for styling

<div class = “col-md-6”> put content here </div>

You can apply many CSS files to your HTML code

There are 12 columns in a standard bootstrap grid

alert (‘hello’);

Console prints out debugging information

You can change the webpage based on user interaction without having to reload the page

<head>

</head>

<body>

<h1 id = “title” onclick = $(‘#title’).html(‘Goodbye’);”> Hello

</h1>

</body>

$ is short for jquery. Title is css selector. Html tag is calling a function on the document. Goodbye replaces the hello

Anonymous function

<head>

function sayGoodbye() {

$(“#title”).html (“Goodbye”);

$(“#title”).click(function() {

$(“#title”).html (“Hello”);

$(“#title”).off(“click”);});

};

</script>

</head>

<body>

<h1 id = “title” onclick = “sayGoodbye();”> Hello

</h1>

</body>

var counter = 0

$(“#number”).text (counter);

Javascript will enable us create the content of the element

<head>

</head>

</h1>

</body>

Var counter = 0;

$(“#number”).html(counter);

Function count () {

Counter = counter +1 ;

$(“#number”).html(counter); }: </script>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.