.
HTML Quick Tutorial
1. 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 Web pages using markup
HTML elements are the building blocks of HTML pages
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
2. A Simple HTML Document
Source Code:
<html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
Codepen:
Example Explained:
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> 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
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> 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
3. HTML Basic
Source code:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2> <h3>This is heading 3</h3> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <a href="https://www.w3schools.com">This is a link</a> <br/> <img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" alt="image example" width="104" height="142"> |
Codepen:
Further readings:
4. HTML Element
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
Source code:
<html>
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
Codepen:
Further readings:
5. HTML Element Attributes
All HTML elements can have attributes.
Attributes provide additional information about an element.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value"
Attributes provide additional information about an element.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value"
The HTML5 standard does not require quotes around attribute values. However, it is recommended to use the quotes.
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes.
Source code:
<html lang="en-US">
<body> <p title="I'm a tooltip">This is a paragraph.</p> <a href="https://www.w3schools.com">This is a link</a> <br/> <img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" alt="image example" width="104" height="142"> <p title='John "ShotGun" Nelson'>John</p> <p title="John 'ShotGun' Nelson">John</p> </body> </html> |
Codepen:
Further readings:
https://www.w3schools.com/html/html_paragraphs.asp
HTML attributes give elements meaning and context.
Some attributes are Global ie can be used on any HTML element.
|
6. 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.
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
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
Source code:
<html lang="en-US">
<body style="background-color:powderblue;">
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<a href="https://www.w3schools.com">This is a link</a>
<br/>
<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" alt="image example" width="104" height="142">
<p title='John "ShotGun" Nelson'>John</p>
<p title="John 'ShotGun' Nelson">John</p>
</body>
</html>
|
Codepen:
Further readings:
7. CSS
CSS stands for Cascading Style Sheets.
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 <style> element in the <head> section
External - by using an external CSS file
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 <style> element in the <head> section
External - by using an external CSS file
Source code (Internal CSS):
<!DOCTYPE html>
<html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
Codepen:
Further readings:
8. JavaScript
The HTML <script> Tag
The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
To select an HTML element, JavaScript very often use the document.getElementById(id) method.
The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
To select an HTML element, JavaScript very often use the document.getElementById(id) method.
Source code:
<html>
<body> <h1>My First JavaScript</h1> <p>JavaScript can change the content of an HTML element:</p> <button type="button" onclick="myFunction()">Click Me!</button> <p id="demo">This is a demonstration.</p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> </body> </html> |
Codepen:
Further readings:
Further Readings
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form. 201410
No comments:
Post a Comment