HTML Documentation

For a better reading experience, check the published document

General info

HTML is the language that is responsible for building the backbone of the website, it is both easy to learn and has high importance in the web development field.

HTML: it stands for Hypertext Mark-up Language

URL: it stands for Uniform Resource Locator

HTML tags: HTML code consists of tags, an opening, and an ending tag. Opening tag starts with < and includes the name of the tag, and ends with >. The closing tag is the same but we add / after the <. So, elements include the starting tag < >, end tag </ > , and the contents in between.

Tags' attributes: they are some information we can provide for the tag. They are placed inside the opening tag of any element and each one consists of the name of the attribute and its value with a = sign in between, like: class="my dev" .

Block Elements: it makes a block around the text, it is something like lists, tables, headlines, and video players.

Inline Elements: it doesn’t make a block but it just flows with the text, like line breaks, emphasis, anchors, and images.

Comments: they are written between  either on a single line or multiple lines.

Standard HTML code

Every HTML code should be designed in this format:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Document </title>
</head>

<body>
    <header>
       Heder of the page
    </header>

    <nav>
       Linkes for the nav-bar
    </nav>

    <main>
       The main components
    </main>

    <footer>
       A footer for the page 
    </footer>
</body>

</html>

HTML Elements (Tags)

Containers

Container elements can be used to organize other elements inside. Most of them are exactly the same, but with some default styles. We have various types of them only to indicate the usage of each one. We can also cascade them freely to have organized sections.

<div> 
      <section> Section 1 </section>
      <section> Section 2 </section>
      <section> Section 3 </section>
</div>

Division: <div> </div>

Section: <section> </ section >

Paragraph: <p> </p>

Article: <article> </article>

Span: <span> </span> used to target single a word inside one of the containers

Important tags and entities

Entities

< an entity to display the sign < without considering it as a part of a tag

> an entity to display the sign >

Text effects

Deleted (crossed) text: <del> text </del>

Emphasized text: <em> text </em>

Italic text: <i> text </i>

Inserted (underlined) text: <ins> text </ins>

Highlighted text: <mark> text </mark>

Bold text: <strong> text </strong>

Headings

Provides 6 levels of headers.

H1 <h1> Title </h1>

H2 <h2> Title </h2>

H3 <h3> Title </h3>

H4 <h4> Title </h4>

H5 <h5> Title </h5>

H6 <h6> Title </h6>

Visual and Interactive Tags

Button

Creates a button that can be linked with a JS function later to perform a specific job.

<button> Click me </button>

Code

Creates a code block to preserve codes from any language.

<code> print("hello world") </code>

iFrame

Inserts (imports) an HTML page as a block. We can specify the source of that page by either a local HTML file or by an online website URL (be aware that most of the websites prevent you from importing their page)

Import a local HTML file

<iframe src="project1/html_files/page1.html"> </iframe>

Import a n online URL

<iframe src="https://example.org/"> </iframe>

Image

Displays an image. The src attribute provides the source of the image and the alt attribute provides what should have replaced the image if it didn't load.

Image from another website (by a URL)

<img  src=”https://example.com” alt="name">

Image from local disk (by a directory of the image)

<img  src=”myProject/name1.png” alt="name">

Anchor

It creates a hyperlink to another web page. Whatever between tags will be displayed as the text of the hyperlink. The href provides the URL or the relative path to the desired page.

<a href="pages/page.html"> Go to </a>

Audio

It displays an audio file on the page. We need to specify multiple sources for the audio file so different browsers can deal with it correctly. The attribute src contains the source, and type contains the type of the file.

We can also add some fixed features to the tag like:

controls activates the audio tools (play, stop, ..etc)

autoplay activates the autoplay once it uploaded

loop activates the looping (start again) once the audio is finished

muted default mute the audio

<audio controls autoplay loop muted>
    <source src="media/file.mp3" type="audio/mpeg">
    <source src="media/file.wav" type="audio/wav">
    Message that will be shown if the browser doesn't support any of the above
</audio>

Video

It displays a video file on the page. We need to specify multiple sources for the video file so different browsers can deal with it correctly. The attribute src contains the source, and type contains the type of the file.

We can also add some fixed features to the tag like:

controls activates the video tools (play, stop, ..etc)

autoplay activates the autoplay once it uploaded

loop activates the looping (start again) once the video is finished

muted default mute the video

width specify the width

height specify the height

poster specify the initial picture

We can use the track tag to upload a subtitle for the video with a vtt file

<video controls autoplay loop muted width=200 height=200 poster="image.png">
    <source src="media/file.mp4" type="audio/mpeg">
    <source src="media/file.ogg" type="audio/ogg">
    Message that will be shown if the browser doesn't support any of the above

    <track src="file_en.vtt" kind="subtitle" srclang="en" label="English">
    <track src="file_it.vtt" kind="subtitle" srclang="it" label="Italian">
</video>

Lists and Table

Lists

We can define 2 kinds of lists, ordered and unordered.

Ordered list

Creates a numbered list.

<ol> 
    <li> item1 </li>
    <li> item2 </li>
    <li> item3 </li>
</ol>

Unordered list

Creates a bulleted list.

<ul> 
    <li> item1 </li>
    <li> item2 </li>
    <li> item3 </li>
</ul>

Table

Creates a table that contains 4 elements. A caption element that contains the title of the table, then the table itself which consists of header (thead), body (tbody), and footer (tfoot). Each section of those consists of one or more row (tr), each table row contains cells. The first row consists of table headers (th) but any other row below it consists of table data (td).

<table>
<caption> Title of the table </caption>

    <thead>
            <tr>
                <th> header1 </th>
                <th> header2 </th>
                <th> header3 </th>
            </tr>
    </thead>

    <tbody>
            <tr>
                <td> data1 </td>
                <td> data2 </td>
                <td> data3 </td>
            </tr>
            <tr>
                <td> data1 </td>
                <td> data2 </td>
                <td> data3 </td>
            </tr>
     </tbody>

      <tfoot>
                <td> data1 </td>
                <td> data2 </td>
                <td> data3 </td>
       </tfoot>

</table>

Form and its supportive tags

We can create a form with a legend (title), entries, labels, and a lot more. We can get the data easily from it by a JS function later.

Form tag

The standard format of the Form-tag:

<form>
    <fieldset>
           <!-- here we have our other supported tags -->

           <input type="submit">
     <fieldset>
<form>

Useful attributes for form tag:

action specify the file at the backend that will receive the data from the form when submission

method specify the sending method (GET/POST)

novalidate prevent the form from rejecting any data entered on its inputs

target="_blank" upon submitting the form, open it in a new tab to keep our inserted data on the old one

Legend, Input, and Label tags

Legend: holds the title of the form

Input: a user-input tag (it has a lot of types, the default is an entry field)

Label: A text label placed besides the input to indicate its usage

<form action="file.php" method="GET">
    <fieldset>
           <legend> Title of the form </legend>

           <label for="name"> Full Name </label>
           <input id="name" type="text" required placeholder="Write your name here" autofocus>
           <br>

           <label> Email </label>
           <input type="email" required value="ex@exampl.com" name="my email">
           <br>

           <label> Password </label>
           <input type="password" required minlength="5" maxlength="15">
           <br>

           <label> Roll </label>
           <input type="text" readonly value="developer">


           <input type="submit">
     <fieldset>
<form>

Useful attributes for label tag:

for link the label with the input tag that has id="test" by using for="test"

Useful attributes for input tag:

required mark the field as required and can't submit without filling it

placeholder write a shaded text to help the user know what to do (for text)

value specify a default value for the input

name mark the input with a string to name the query at the web request/response

readonly prevent the user from editing this input

disabled disable the input and prevent the form from reaching its data

autofocus focus the cursor on this input

minlength specify the minimum allowed length of characters to be typed (for text)

maxlength specify the maximum allowed length of characters to be typed (for text)

checked check the button or the box by default (for radio and checkbox)

Changing the type of the input ("type" attribute)

type specify the type of the input (entry field, button, ..etc)

Entries (input tag):

type="text" a field for any text

type="email" a field for an email

type="password" a field for a password (displayed as stars *)

type="search" a search field

type="url" a URL field that only accepts URLs

<input type="password" required minlength="5" maxlength="15">
<input type="search">
<input type="url">

Buttons (input tag):

type="submit" a button that sends the data

type="reset" a button that clears all fields

type="radio" a radio button that allows you to select one of the options

<input type="submit" value="Register the form">

<input type="reset">

<input id="win" type="radio" value="Windows" name="os" checked>
<label for="win"> Windows </label>
<input id="lin" type="radio" value="Linux" name="os">
<label for="lin"> Linux </label>
<input id="mac" type="radio" value="Mac" name="os">
<label for="mac"> Mac </label>
<input type="reset">

Color selection (input tag):

type="color" a selection that allows you to select a color from the palette

<input type="color">

Numeric selections (input tag):

type="range" a slider that allows you to select a value from a range

type="number" a combo box that allows you to select a number

<input type="range" min="0" max="100" step="10" value=20>
<input type="number" min="1" max="10" step="1" value=7>

Browse file button (input tag):

type="file" a browse button that allows you to get a file name from your local drive

<input type="file">

Date and Time (input tag):

type="date" a selection box that allows you to choose a specific day in this format (mm/dd/yyyy)

type="month" choose a specific month in this format (month year)

type="time" choose a specific time in this format (hh:mm period)

<input type="date">
<input type="month">
<input type="time">

List selection (input tag):

A spinbox that allows you to select one of many options. You can also type in the field to search for one of the selections.

<input list="myLangs" name=""prog>

<datalist id="myLangs">
        <option value="Pytho"> 
        <option value="Jave"> 
        <option value="C++">
        <option value="PHP"> 
</datalist >

Checkbox (input tag):

type="check" a checkable checkbox

<input id="win0" type="checkbox" value="Windows" name="os" checked>
<label for="win0"> Windows </label>
<input id="lin0" type="checkbox" value="Linux" name="os" checked>
<label for="lin0"> Linux </label>
<input id="mac0" type="checkbox" value="Mac" name="os">
<label for="mac0"> Mac </label>

Select tag (spinbox)

Creates a single spinbox where the user can select one of the provided options. The attribute value holds the string that will be sent when the form is submitted. We can display the same options as a single group inside the spinbox, or we can distribute them over many groups. The only difference between this and the "input list" is that you can't search on this one.

Useful attributes for select and option tags:

multiple (for select) allows the user to select more than one option by holding the (Ctrl) key

selected (for option) set this option as the default for the spinbox

One group

<select name="books" id="myBooks" multiple>
        <option value="book1"> Administration </option>
        <option value="book2"> Marketing </option>
        <option value="book3" selected> Finance </option>
        <option value="book4"> Python </option>
        <option value="book5"> Java </option>
        <option value="book6"> C++ </option>
</select>

Multiple groups

<select name="books" id="myBooks" multiple>

    <optgroup label="Work books">
        <option value="book1"> Administration </option>
        <option value="book2"> Marketing </option>
        <option value="book3"> Finance </option>
    </optgroup>

    <optgroup label="programming books">
        <option value="book4"> Python </option>
        <option value="book5"> Java </option>
        <option value="book6"> C++ </option>
    </optgroup>

</select>

Textarea tag

Creates a text area for the user to fill. It acts exactly like the input text field and has all its attributes, but this one can be resized and manipulated easily

Useful attributes for textarea tag:

cols specifies the width of the area

rows specifies the height of the area

<textarea name="area" cols="20" rows="50">

Coding tricks

We can use these tricks to type redundant elements faster in the editor.

div*5 creates 5 div elements at once

div*5>section creates 5 div elements each one has a section element inside it

div>section*5 creates a div element with 5 section elements inside it

div.container1 creates a div element with a CSS class defined on it called (container1)

Search This Blog

Software Technical Documentations

HTML - web