Welcome to Ivan's HTML notes!

Feel at home and refresh your HTML skills.


Basics tags, comments, styles & colors, formating a page.


THE CODE

<_!DOCTYPE html>

<_html>


<_head>

<_meta charset="UTF-8">

<_meta name="description" content="This is an awesome website">

<_title>Ivan's Website<_/title>

<_/head>


<_body style="background-color:#FFDAB9">


<_h1>Ivan's Website<_/h1>


<_header>

<_nav><_/nav>

<_/header>


<_main>


<_article>


<_section>

<_/section>

<_hr>

<_/article>


<_/main>


<_footer>

<_/footer>


<_/body>


<_/html>


<_br/>

This is my paragraph

THE CODE

<_br/>

<_p><_big>This<_/big> <_big>is<_/big> my <_b><_i>paragraph<_/i><_/b><_/p>

This is another paragraph

H20

102

THE CODE

<_br>

<_p>This is another <_i>paragraph<_/i><_/p>

<_p>H<_sub>2<_/sub>0<_/p>

<_p>10<_sup>2<_/sup><_/p>

Styles and Colors

You can style your HTML and make it look pretty

THE CODE

<_!-- COMMENTS like Don't display this-->

<_h2 style="color:green;">Styles and Colors<_/h2>

<_p style="color:red; background-color:blue;">You can style your HTML and make it look pretty<_/p>

Formating a Page

3 main parts - header, main and footer

Header h1 practice for sections

Header h2

Header h3

Header h2

Side tag for web advertisement

THE CODE

<_hr>

<_br>

<_h3>Formating a Page<_/h3>

<_p>3 main parts - header, main and footer<_/p>

<_header>

<_nav><_/nav>

<_/header>

<_main>

<_article>

<_section>

<_h1>Header h1 practice for sections<_/h1>

<_h2>Header h2<_/h2>

<_h3>Header h3<_/h3>

<_h2>Header h2<_/h2>

<_/section>

<_h1>Side tag for web advertisement<_/h1>

<_aside>Side tag

<_/aside>

Links to link one web site to another and do not navigate away from your website, page 1,2,3, Home, navigate to file or image on your comp.

Google's Homepage

 Home Page 2 Page 3 Survey Form file on my computer

THE CODE

<_a href="https://www.google.com" target="_blank"><_h1>Google's <_b>Homepage<_/b><_/h1><_a/>

<_a href="index.html">Home<_a/>

<_a href="page2.html">Page 2<_a/>

<_a href="Page_3/page3.html">Page 3<_a/>

<_a href="Survey_Form.png">Survey Form file on my computer<_a/>

On Page 3 "Home" link (go back dir code) in Page3.html <_a href="/C:/Users/Asus Rog Zephyrus/Desktop/``/Learning/Coding 1 Responsive Web Design Certification/html_site/index.html">Home<_a/>


Using images in your website from a website and from my computer.

A really nice Rubik Cube A Rubik Cube A metling Rubik Cube image link

THE CODE

<_section>

<_h2>Using images in your website from a website and from my computer.<_/h2>

<_img width="200" height="200" src="https://i.pinimg.com/originals/89/be/ac/89beac3d0065b983ff69abae78077a58.png" alt="A really nice Rubik Cube" />

<_img width="200" height="200" src="rubiks_cube_1.png" alt="A Rubik Cube" />

<_img width="200" height="200" src="123.png" alt="A really nice Rubik Cube" />

If you only set width="100", HTML will automatically resize the height correctly.


<_p>Combine image with a link, alt, size and _blank code.<_/p>

<_a href="https://www.pngfind.com/pngs/m/215-2156265_rubiks-cube-png-transparent-png.png" target="_blank">

<_img

width="200"

height="200"

alt="A metling Rubik Cube image link"

src="https://www.pngfind.com/pngs/m/215-2156265_rubiks-cube-png-transparent-png.png">

<_/a>

<_/section>


Videos and YouTube iFrames (stored locally).



Videos and YouTube iFrames example below BUT*.

*BUT (stored on utube which is illegal and blocked in RF so an empty field below)


THE CODE

<_section>


<_p>_<_h2>Videos and YouTube iFrames.<_/h2><_/p>

<_br>

<_video src="cat_short_clip_0.mp4"

autoplay

loop

poster="cat_image_1.bmp"

controls

width="500"

height="280">

<_/video>


<_!-- YOUTUBE EMBEDED OPTION UNDER SHARE BUTTON -->

<_iframe

width="500"

height="280"

src="https://www.youtube.com/embed/laYQFi5LrZA?start=18"

title="YouTube video player"

frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen>

<_/iframe>


<_/section>

Lists


unordered list examples


ordered list examples

  1. Apples
  2. Oranges
  3. Bananas

ordered list examples A, b, III, iv.

  1. Apples
  2. Oranges
    1. item 1
  3. Bananas

description list examples.

Apples
- They are red
Oranges
- They are orange

THE CODE

<_section>

<_p>unordered list examples<_/p>

<_ul>

<_li><_a href="#">Apples<_/a><_/li>

<_li>Oranges<_/li>

<_li>Bananas<_/li>

<_/ul>

<_br>

<_p>ordered list examples<_/p>

<_ol>

<_li><_a href="#">Apples<_/a><_/li>

<_li>Oranges<_/li>

<_li>Bananas<_/li>

<_/ol>

<_br>

<_p>ordered list examples A, b, III, iv.<_/p>

<_ol type="A">

<_li><_a href="#">Apples<_/a><_/li>

<_li>Oranges<_/li>

<_ol>

<_li>item 1<_/li>

<_/ol>

<_li>Bananas<_/li>

<_/ol>

<_br>

<_p>description list examples.<_/p>

<_dl>

<_dt>Apples<_/dt>

<_dd>- They are red<_/dd>

<_dt>Oranges<_/dt>

<_dd>- They are orange<_/dd>

<_/dl>

Tables

List of Numbers
num1 num2 num3
One Two Three three and a half
Three Four Five

THE CODE

Divs(block container) & Spans(inline) (are containers in HTML used for ease of style in CSS)

Blocks takes entire width of a page, can not have two in inline. Inline only take as much space as they need.

link1 link2

Paragraph1

Paragraph2

span1 span2
div1
div2

THE CODE

Input(tags text boxes, text areas, radio buttons) & Forms

JAVA SCRIPT language used to get the input from users from input and forms(NOT HTML/CSS).

Text Box Example

Password Box Example

Text Box with a value text Example

Text Area Example

Date Example

Email Example

Range Example

File Example

Checkbox Example

Radio button Example

Submit Button Example

A Form Example

Form command is a wrapper(see code)

THE CODE


iFrames

This is html element able to display another website in your webpage(imbed entire website into your webpage).

iframe or embed code


Meta Tags

This specifies character set in the file. Meta lives in the head tag. Define information about the file. Meta is data about data.

Specifies character set in the file

<_meta charset="UTF-8">

Full on description. Can be used by search engine to help figure out what your website is about. Page ranking etc. 160 characters for site description is ok, above can be penalised.

<_meta name="description" content="Your Description">

Who the author is.

<_meta name ="author" author="Ivan">

Keywords

<_meta name ="keywords" content="HTML, Tutorial">

Important meta tag is how your website is displayed on different devices

<_meta name ="viewport" content="width=device-width, initial-scale=1.0">