My Cheatsheet

About this Cheat Sheet

This cheat sheet covers the the core language construct of the mark up language (HTML) but bear in mind that this is not complete by any means as HTML is a broad language.If you want to learn more or everything about HTML , make sure to do more practice and research as that is the only way to do so.

To get started with a html page. After creating the folder and file on the IDE (VS Code or any other one), Just press the shift + 1 + tab keys on your keyboard.This gives the basic layout of a html file.

About the author

I am Chidiebere Nwigwe from Anambra State,Nigeria. I am an upcoming Software Developer I have always thought to myself of how i can be a solution to the people or to the globe as a whole and thereby that thought gave me interest in building software applications basically to solve people's problem through the use of technology. I am just a starter as i have not had a professional job yet because i still have a long way to go but i really like how it is already going so for sure I definitely have a future in this career path that I have chosen.

# Getting Started

An easier way to start up your html file in your folder is by pressing the shift + 1 + tab keys on your keyboard, this will give you the basic html layout involving the doctype html declaration, html tag, head tag, title tag,body tag and meta tags. Also an easy way to type both the opening and closing tags is by just typing the "tag name + tab key".

NOTE: The code is written inside the body element of your html page. Also most elements in HTML has a closing tag except for a few such as the < img > element for images.

Comments

Comments are used to add notes to our code.In html, You can comment out a line of code or lines of code by simply highlighing it and pressing the (Ctrl + common slash ) keys.

Paragraph Element

The < p > HTML eklement represents a parargraph. Used to contain texts or explanations under the header elements. The < p > tag also has a corresponding closing tag < /p > .

HTML Link

To declare a link use the "a" element.Inside the opening tag of the element, put in the source/URL that the hyperlink points to into a href attribute . An attribute is a feature of html elements that are put into the opening tag of those elements.

        < a href="......hyperlink URL">......name of hyperlink< /a>

Another attribute involved with links is the target attribute which can be set to _blank (to open link in a new page) or _self (to open link in same page).

Image Tag

This is self closing tag so it does not need a closing tag it has different attributes such as;

src: Required image location in hmtl file
alt: Describe of the image
width: width of the image
height: height of the image

Text Formatting Tag

Used to format texts.Some are;

    < b >To make bold text< /b >
    < strong >To show that text is important< /strong >
    < i >To make italic text< /i >
    < em >To show that text is emphasized< /em >
    < u >To underline Text< /u >
    < pre >For Pre-formatted Text< /pre >
    < sup >Makes text superscripted< /sup >
    < sub >Makes text subscripted
    < blockquote >For text Block Quote< /blockquote >

Section Divisions Tags

These are tags that are used to divide your page up into sections.

The < div > < /div > for a division or section of page content.
The < p > < /p> for paragraph of text as described earlier on.
The < br > for line break.
The < hr > for basic horizontal line.

Header Navigation

The < header > element represents a container for introduction of content or for a set of navigational links. These links can be in a < nav > element which is a container for navigational links. There is also a < footer > element which ia container for copyright information or back to top links etc.

            < header >
                < nav >
                   < a href="">Home< /a >
                   < a href="About">< /a >
                < /nav >
            < /header >

Some HTML5 Tags

article: For independent content
aside: For secondary content
figcaption: For caption of a figure
main: main content of the document
video: For embedding of video

HTML Table

The < table > element defines a table in HTML.Inside this element are some the few table tags like the < th > which defines a header cell in a table, the < tr > which defines a row in a table and < td > which defines a cell in a table.

< td > and < tr > Attributes

colspan: The number of columns a cell should span
rowspan: The number of rows a cell should span

A basic HTML table layout

        < table > 
            < tr >
                < th >....Header< /th >
                < th >....Header< /th >
            < /tr >
            < tr >
                < td >....Body< /td >
                < td >....Body< /td >
            < /tr >
        < /table >

HTML Lists

HTML lists can be either unordered or ordered. If unordered use the < ul > element but if ordered use < ol > element. After this, the list can be put into the element with their respective < li > tags.

            < ul >
                < li >....< /li >
                < li >....< /li >
            < /ul >

HTML Input Tag

The < input > tag is an empty element that identifies a particular typeof field information to obtain from a user. It is a self closing tag.

       < input type="text" id=".." name=".." value=".." placeholder="..">

The "type" attribute is for the type of data that is to be input. It could be text, checkbox, radio, file, password, email, button, image, time, month etc.
The "id" attribute is for the unique identifier for that input type and it can be anything the user decides. This is also useful for when selecting an element to be styled in CSS.
The "name" attribute can be any name used to describe the data to be put.
The "placeholder" attribute adds a temporary text.
There are some many other attributes like the "minlength", "maxlength", "required" etc.

HTML Forms

HTML Form can be declared using them < form > element Inside the form, the user can write in the different input tags needed.The form element has several attributes like "action" and "method", the "method" attribute can be set to "POST" or "GET"(default) NOTE: Input tags can be connected to label tags , to do this , just set the "for" attribute of the label element to the same value as the "id" attribute of the input element.

        < form action="" method="GET">
            < input type="checkbox" id="remember" name="ck">
            < label for="remember">Remember me< /label >
        < /form >

Textarea Tags

The textarea tag is an input box that collects text input from user. It has "rows" and "cols" attribute that comes with which defines how wide and high the user wants it to be.

        < textarea rows="2" cols="30" name="address" id="address">< /textarea >

Select Tags

The select tag creates a dropdown menu for the user to selcet options from To input the options in side the select tag. Create an option inside the select tag.

        < label for="city">City:< /label >
            < select name="city" id="city" >
                    < option value="1">Sydney< /option >
                    < option value="2">Melbourne< /option >
                    < option value="3">Cromwell< /option >
            < /select >

HTML

Cheat Sheet

Chidiebere Nwigwe