Introduction to HTML
-
Upload
brandon-himpfen -
Category
Documents
-
view
208 -
download
1
description
Transcript of Introduction to HTML
![Page 1: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/1.jpg)
Introduction to HTML
By Brandon Himpfen
![Page 3: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/3.jpg)
What is HTML?
HTML stands for HyperText Markup Language
The initial release of HTML was in 1993
The current version of HTML is 5, which was released on 4 February 2014
HTML is developed by W3C and WHATWG
![Page 4: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/4.jpg)
Websites
A website consists of one web page or more than one web page.
An HTML document consists of HTML elements (tags with attributes).
A web browser will interpret the HTML elements to display the page.
![Page 5: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/5.jpg)
HTML Elements
HTML elements in a web page is what the web browser will read and interpret to display the web page.
HTML elements will have a tag and one or more attributes (if supported).
Each HTML element will have a opening and closing – depends on the tag.
![Page 6: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/6.jpg)
HTML Elements (Syntax)
In general:
<tag attribute=“value”> </tag>
Or
<tag attribute=“value” />
Remember, a tag can have one or more attributes.
![Page 7: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/7.jpg)
HTML Elements Layout
A web page has a structure of how elements are laid out.
![Page 8: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/8.jpg)
Defining a HTML Web Page
A HTML web page will start and end with a HTML tag, like so:
<HTML>
… more elements and content ..
</HTML>
![Page 9: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/9.jpg)
HTML Head
After the opening of the <HTML> element, we will add the head HTML element.
The head element is a wrapper for other elements that define web page preferences.
What you add in between the head elements will not be shown in the web browser, as it is not web page content.
<HEAD>
… head related tags ...
</HEAD>
![Page 10: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/10.jpg)
HTML Head … cont’d
The following HTML element tags can be used within the <head></head> element: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
![Page 11: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/11.jpg)
Title Tag
Each document should have a title tag: <title>Title of Web Page</title>
The title tag will only show on the web browser’s tab, not in the body on the web page itself.
The title tag should be in between the head tag:
<HEAD>
<TITLE>Title of Web Page</TITLE>
</HEAD>
![Page 12: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/12.jpg)
Body Tag
The body tag is used after the closing of the title tag and before the closing of the HTML tag.
Anything within the body tag will be rendered (to display) on the web page.
<BODY>
… stuff to show website visitors …
</BODY>
![Page 13: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/13.jpg)
Putting it All Together
We’ve just created a necessary HTML elements’ layout of a web page.
<HTML><HEAD>
<TITLE>Title of the Web Page</TITLE></HEAD><BODY>
… content shown to visitor in the web browser …</BODY>
</HTML>
![Page 14: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/14.jpg)
Common HTML Tags
Let’s explore common HTML tags in a web page.
![Page 15: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/15.jpg)
CSS related HTML Tags
CSS can be added to a web page in three (3) ways:
1. Inline
2. Internal
3. External
![Page 16: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/16.jpg)
Inline CSS Example
Inline CSS will use a tag attribute called “style” and the CSS is held within that attribute.
Let’s say we want to add CSS to the paragraph tag, which is <p></p>
<p style=“color:#000;”>Paragraph text goes here.</p>
Inline CSS goes only to the opening of the tag.
In this example, color:#000 is the CSS.
![Page 17: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/17.jpg)
Internal CSS Example
Internal CSS uses the <style></style> tag, with the CSS being held within that tag.
< STYLE >
… CSS goes here…
</STYLE>
The style tag can be used in between the head and body tags.
![Page 18: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/18.jpg)
External CSS Example
External CSS is where a CSS file is references using the link tag.
<link rel="stylesheet" type="text/css" href=“path-to-file/filename.css">
The link tag can be used in between the head and body tags, but preferably in the head tags.
In the example, link tag uses a attribute of rel (relationship) with a value of stylesheet, aka a CSS file.
In the example, the attribute type, states the type of document being referenced (linked to).
Href attribute refers to link location.
![Page 19: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/19.jpg)
Meta Tags
Meta tags should be used only within the <head></head> tags.
Metadata is data (information) about data.
Metadata will not be displayed on the page.
Syntax:
<meta name="" content="">
The name attribute is the name of the meta and the content attribute defines content of the name attribute.
You can have multiple meta tags in the head of the web page.
Meta tags are not required for the web page for render.
![Page 20: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/20.jpg)
Common Meta Tags
Common meta tags’ names include:
<meta name="keywords" content="">
Keywords defines common words of a web page.
<meta name="description" content="">
Description defines what the web page is about.
<meta name="author" content="">
Author defines who made the web page.
![Page 21: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/21.jpg)
Script Tags
Script tags define a client-side script.
The script tag is common for referencing (linking) to JavaScript files.
Should be at the bottom of a web page, just before the closing body tag, </body>, but can be used in between the <head></head> tags.
The script tag can also be used anywhere in between the body tags.
Google Analytics Javascript code will commonly be put in between the <head></head> tags.
Why it is preferred in the bottom, before the </body>? Because these files are generally not required to load a web page, but are used to enhance the web page functionality.
![Page 22: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/22.jpg)
Heading Tags
Heading tags define titles of a web page, which is display to the visitor.
<hX>Title</hX>
Where X is the number of the heading.
The number of the heading can be from 1 to 6, where 1 is the highest level (biggest) and 6 being the least level (smallest).
The highest level should be used the least in a web page, where to the least level, h6, should be used the most (if needed.)
![Page 23: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/23.jpg)
Paragraph Tags
Paragraphs use the p tag.
<p>The text of each paragraph will go here.</p>
![Page 24: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/24.jpg)
Formatting Tags
Formatting tags fit into one of three categories:1. Text
2. Computer Output
3. Citations, Quotations, and Definition
![Page 25: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/25.jpg)
Text Formatting Tags
Tag Example Usage Description<b> <b>text</b> Bold – You should be <strong> for HTML5 documents.
<em> <em>text</em> Emphasize
<i> <i>text</i> Italic
<small> <small>text</small> Small
<strong> <strong>text</strong> Newer version of bold
<sub> <sub>text</sub> Subscript
<sup> <sup>text</sup> Superscript
<ins> <ins>text</ins> Inserted text
<del> <del>text</del> Deleted text
<mark> <mark>text</mark> Marked text
![Page 26: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/26.jpg)
Computer Output Formatting Tags
Tag Description<code> Code
<kbd> Keyboard text
<samp> Sample code
<var> Variable
<pre> Preformatted text
Syntax:
<tag>Text</tag>
![Page 27: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/27.jpg)
Citations, Quotations, and Definition Tags
Tag Description<abbr> Abbreviation
<address> Address
<bdo> Bi-Directional Override - Text direction
<blockquote> Quote
<q> Short quotation
<cite> Citation
<dfn> Definition (term)
![Page 28: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/28.jpg)
Images
To add an image to a web page, we will use the img tag.
<img src="" alt="" width="" height="“ />
The img tag does not have a closing tag, </img> but instead a closing in the opening tag.
Src attribute is the path to the image.
Alt should be a description of the image. Commonly seen when you hover over the image.
Width and height attributes should be included! It is a best practice.
![Page 29: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/29.jpg)
Tables
<table width=“” cellpadding=“” cellspacing=“”><thead>
<tr><th></th>
</tr></thead><tbody>
<tr><td></td>
</tr></tbody>
</table>
Tables consist of opening and closing tag, with table specific tags within it.
thead is the header group of a table tr stands for table row th stands for table heding, usually the first row. td is a table cell, which contains data. tbody stands for the table body.
Use table, thead and tbody once. tr, th, and td can be used multiple times. tr wraps around th and td tags.
![Page 30: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/30.jpg)
Links
Links use the a tag.
Links can be made to internal or external web pages.
<a href="“ title=“” target="">Link Text</a>
Href attribute is the URL
Title is the title of the link
You can add target, if you want, to open a link in a new web browser window.
![Page 31: Introduction to HTML](https://reader033.fdocuments.us/reader033/viewer/2022051110/54bb62f24a7959f7038b45f4/html5/thumbnails/31.jpg)
The End
There is more to HTML then this, but this should give you a good foundation.
I hope you enjoyed this presentation!