VMPYRC'S LAB - Learning HTML

HTML

Heading 1

Paragraph

Heading 2

Paragraph

Heading 3

Paragraph

Heading 4

Paragraph

Heading 5

Paragraph

Heading 6

Paragraph

Horizontal Rules

Used to separate content

Styles + Paragraphs

This is a paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat tortor semper lacus faucibus scelerisque. Nulla aliquam id nisi et semper. Maecenas ullamcorper mi lectus. Sed ac aliquet leo. Pellentesque id mauris id lorem volutpat consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egestas posuere eleifend.

This is a
paragraph with
two line breaks.

Normal, Small, Bold, Strong, Italics, Emphasized, Marked, Deleted / Strikethrough, Inserted / Underlined, Subscript, Superscript

This text is from right to left. This text is from right to left.

Paragraph with 30px font size.

Paragraph with 70% font size.

Paragraph with a background color.

Paragraph with a text color.

Paragraph with a solid 2px border color.

Paragraph with a dashed 5px border color.

Paragraph with a different font.

Paragraph aligned to the left.

Paragraph aligned to the center.

Paragraph aligned to the right.

Paragraph justify aligned.

Title Attribute

Hover this paragraph to see the tooltip text.

Hover this link to see the tooltip text.

Double Quotes within Single Quotes: 'Johnathan "John" Smith'

Single Quotes within Double Quotes: "Johnathan 'John' Smith"

Preformatted Text

Used to display text in a fixed-width font that preserves spaces and line breaks

      Lorem ipsum dolor sit amet,
      consectetur         adipiscing    elit.
            Suspendisse     volutpat     tortor
      semper lacus faucibus scelerisque.

Contact Information / Address

Written by VMPYRC.
Visit my GitHub page at: https://github.com/VMPYRC/

Quotations and Citations

Short Quotations

Some lorem ipsum: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Citations

This page is HTML by VMPYRC. Part of the LAB project. Citations are the title of a creative work (not the person's name). This is usually rendered in italics.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat tortor semper lacus faucibus scelerisque. Nulla aliquam id nisi et semper. Maecenas ullamcorper mi lectus. Sed ac aliquet leo. Pellentesque id mauris id lorem volutpat consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egestas posuere eleifend.

Abbreviations

This page is for my notes on HTML.

Comments

Check the source code to see the secret comments:

Comment! Comment! Comment!

Links

Resources Used

Absolute and Relative URLs

Absolute: Full web address - Lab index page

Relative: Local link within the same website - Lab index page

Links with the Target Attribute

The following examples will use this link: https://github.com/VMPYRC/Lab/

Button as a Link

Bookmark Links

Jump to the Images Section

Jump to the Projects Section of the Lab's Index page

Images

Image Styles

Inline - Within the img tag on separate lines

      <img
      src="image.png"
      alt="Alternative Text Here"
      width="100"
      height="100"
      />

Inline - Within the style attribute of the img tag

      <img
      src="image.png"
      alt="Alternative Text Here"
      style="width: 100px; height: 100px"
      />

Internal - Within the head section of the HTML page

      <head>
        <style>
          img {
            width: 100%;
          }
        </style>
      </head>

External - Within the styles.css file

      img {
      border: 1px solid #000;
      width: 100px;
      height: 100px;
      background-color: #FFFFFF;
      width: auto;
      margin: 20px auto; 
      }

Image URLs

Relative URL: Links to an image hosted within the current website

Line art. Black background. White outline of a cloud with rain

Absolute URL: Links to an external image hosted on another website

Line art. Black background. White outline of a cloud with rain

Absolute URL + Image as a Link

Line art. Black background. White outline of a cloud with rain

Image Floating

Line art. Black background. White outline of a cloud with rain THE IMAGE WILL FLOAT TO THE LEFT OF THIS TEXT.

Line art. Black background. White outline of a cloud with rain THE IMAGE WILL FLOAT TO THE RIGHT OF THIS TEXT.

THE IMAGE WILL FLOAT HERE Line art. Black background. White outline of a cloud with rain IN THIS TEXT.

Image Maps (Images with Clickable Areas)

Line art. Black background. White shapes: rectangle, circle, diamond Lab - Source Code Image - Source HTML - Page

Lists

Unordered List

Ordered List

  1. Regular
  2. Ordered
  3. List
  1. Type 1
  2. is
  3. Numbers
  1. Type A
  2. is
  3. UPPERCASE LETTERS
  1. Type a
  2. is
  3. lowercase letters
  1. Type I
  2. is
  3. UPPERCASE ROMAN NUMBERALS
  1. Type i
  2. is
  3. lowercase roman numerals
  1. this list
  2. starts at
  3. number 24

Description List

Colors
- black
- white
- pink
Primary Colors
- red
- green
- blue

Nested Lists

  1. Animals
  2. Colors
    1. Red
    2. Green
    3. Blue
  3. Food

Tables

tr, td, th
1 2 3
A B C
D E F
colgroup, col
1 2 3
A B C
thead, tbody, tfoot
1 2
A B
C D
3 4