Download HTML Tutorial: A Comprehensive Guide to Web Development Fundamentals and more Study notes Computer science in PDF only on Docsity!
What is HTML?
HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page
Simple HTML Document
Page Title
This is a Heading
This is a paragraph.
Example Explained
The declaration defines this document to be HTML The element is the root element of an HTML page The element contains meta information about the document The element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets: <tagname>content goes here...</tagname> HTML tags normally come in pairs like <p> and </p> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a forward slash inserted before the tag name Tip: The start tag is also called the opening tag , and the end tag the closing tag.
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Editors
Web pages can be created and modified by using professional HTML editors.
HTML Documents
All HTML documents must start with a document type declaration: . The HTML document itself begins with and ends with . The visible part of the HTML document is between and .
My First Heading
My first paragraph.
HTML Headings
Coffee Tea Milk
HTML Elements
An HTML element usually consists of a start tag and an end tag, with the content inserted in between:
Content goes here...
The HTML element is everything from the start tag to the end tag:
My first paragraph.
Start tag Element content End tag My First Heading
My first paragraph.
The style Attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.
Example
This is a paragraph.
HTML Headings
Headings are defined with the to tags. defines the most important heading. defines the least important heading.
Example
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Headings Are Important
Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure. headings should be used for main headings, followed by headings, then the less important , and so on.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:
Example
Heading 1
HTML Horizontal Rules
The tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The element is used to separate content (or define a change) in an HTML page:
Example
This is heading 1
This is some text.
This is heading 2
This is some other text.
HTML Paragraphs
The HTML
element defines a paragraph :
Example
This is a paragraph.
This is another paragraph.
HTML Display
You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.
The HTML Element
The HTML element defines preformatted text. The text inside a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:
Example
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
HTML Styles
Example
I am Red
I am Blue
I am Big
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax : < tagname style=" property : value; "> The property is a CSS property. The value is a CSS value. (You will learn more about CSS )
Background Color
The CSS background-color property defines the background color for an HTML element. This example sets the background color for a page to powderblue:
Example
This is a heading
This is a paragraph.
Text Color
The CSS color property defines the text color for an HTML element:
Example
This is a heading
This is a paragraph.
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
This is a heading
This is a paragraph.
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
This is a heading
This is a paragraph.
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example
Centered Heading
Centered paragraph.
Summary Use the style attribute for styling HTML elements Use background-color for background color Use color for text colors Use font-family for text fonts Use font-size for text sizes Use text-align for text alignment
HTML Text Formatting
Text Formatting
This text is bold This text is italic This is (^) subscript and superscript
HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.
Example
HTML Small Formatting
HTML Element
The HTML element defines marked/highlighted text:
Example
HTML Marked Formatting
HTML Element
The HTML element defines deleted/removed text.
Example
My favorite color is blue red.
HTML Element
The HTML element defines inserted/added text.
Example
My favorite color is red.
HTML Element
The HTML element defines subscripted text.
Example
This is subscripted text.
HTML Element
The HTML element defines superscripted text.
Example
This is superscripted text.
HTML Text Formatting Elements
Tag Description
Defines bold text Defines emphasized text Defines italic text Defines smaller text Defines important text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Defines marked/highlighted text
HTML Quotation and Citation Elements
Quotation
Here is a quote from WWF's website: For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.
HTML for Short Quotations
The HTML element defines a short quotation. Browsers usually insert quotation marks around the element.
HTML for Work Title
The HTML element defines the title of a work. Browsers usually display elements in italic.
Example
The Scream by Edvard Munch. Painted in 1893.
HTML for Bi-Directional Override
The HTML element defines bi-directional override. The element is used to override the current text direction:
Example
This text will be written from right to left
HTML Quotation and Citation Elements
HTML Comments
Comment tags are used to insert comments in the HTML source code.
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.
Example
This is a paragraph.
Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:
Example
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Background Color
You can set the background color for HTML elements:
Example
Hello World
Lorem ipsum...
**Text Color** You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
Hello World
Lorem ipsum...
Ut wisi enim...
To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255). Experiment by mixing the RGB values below: Shades of gray are often defined using equal values for all the 3 light sources:
HEX Value In HTML, a color can be specified using a hexadecimal value in the form:
# rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
HTML Styles – CSS
Styling HTML with CSS (CSS stands for C ascading S tyle S heets.) CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a
This is a heading
This is a paragraph.
An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is how the "styles.css" looks: body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
CSS Fonts
The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used.
Example
This is a heading
This is a paragraph.
CSS Border The CSS border property defines a border around an HTML element:
Example
p { border: 1px solid powderblue; }
CSS Padding
The CSS padding property defines a padding (space) between the text and the border:
Example
p { border: 1px solid powderblue; padding: 30px; }
CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
p { border: 1px solid powderblue; margin: 50px; }
The id Attribute
To define a specific style for one special element, add an id attribute to the element:
I am different
then define a style for the element with the specific id:
Example
#p01 { color: blue; }
The class Attribute
To define a style for special types of elements, add a class attribute to the element:
