HTML<!DOCTYPE>Declaration
- This represents the document type, and gives the browsers help to display web pages correctly.
- It must appear once only, at the top of the HTML page.
- The <!DOCTYPE> declaration for HTML5 is <!DOCTYPE>
- All HTML documents must start with the document type declaration <!DOCTYPE html>
- The HTML document itself begins with <html>and must end with the closing tag </html>
- The visible part or what you see of the HTML document is between <body> and the closing tag </body>
- It helps browsers to display web pages correctly by the <!DOCTYPE> declaration represents the document type.
- <!DOCTYPE> declaration for HYML5 is <!DOCTYPE>
- The <!DOCTYPE> declaration is not case sensitive.
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML </title>
<style>
h1
{
color: blue;
}
p
{
color: red;
}
</style>
</head>
<body>
</body>
</html>
Paragraphs
- The <p> tag is used to define HTML paragraphs.
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings </title>
</head>
<body>
<p> Would be your first paragraph>/p>
<p>Would be your second paragraph</p>
</body>
</html>
Paragraph Results
Would be your first paragraph
Would be your second paragraph
Source
View HTML Source code by right clicking on a web page or Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source".
Inspect an HTML Element:
INSPECT
Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens
You may copy and paste, however you can not change anything or delete it.
Inspect an HTML Element:
INSPECT
Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens
You may copy and paste, however you can not change anything or delete it.
Headings
- HTML headings are defined with the tags <h1> to <h6>
- <h1>defines the most important heading also the largest, with <h6> defining the least important heading and the smallest.
<h1> This is the most important heading and the largest </h1>
<h2> This is the second most important heading and the second largest </h2>
<h3> This is the third most important heading and the third largest </h3>
<h4> This is the fourth most important heading and the fourth largest </h4>
<h5> This is the most important heading and the largest </h5>
<h6> This is the least important heading and the smallest </h6>
Heading Results
This is the most important heading and the largest
This is the second most important heading and the second largest
This is the third most important heading and the third largest
This is the fourth most important heading and the fourth largest
This is the most important heading and the largest
This is the least important heading and the smallest
Images
- HTML images are defined with the <img>. attribute
- The source file ( <src> ), alternative text ( <alt> ), <height>. are provided as attributes
- img src ="../repel.jpg" ;alt ="../rep.jpg" width ="104" height ="140"
<!DOCTYPE html>
<html>
<head>
<title>HTML Images </title>
</head>
<body>
<img src="repel.jpg" width="437" height="419" alt=""/>
</body>
</html>
HTML Images
Links
<html>
<head>
<title>HTML Images </title>
</head>
<body>
<img src="repel.jpg" width="437" height="419" alt=""/>
</body>
</html>
Image Results
Links
- HTML links are defined with the <a> tag.
- The link's destination is specified in the <href>
- < a href> ="https://www.learningcodeforgod.net">Home page. </a>
- < a href> ="https://www.christisalive.net">Home page. </a>
Hyperlinks:
- Rules for that anchor name.
- You may use lower case (small) or upper case (large) letters. You can not use "troop" and then use "TROOP" for another anchor.
- Must Remember the exact spelling and case of the word used. It is recommended to use lowercase letters all the time. (write the spelling down to make sure it is correct, it will save you time.)
-
First you need to accessibility to make an Anchor to the page you are going to link to.
- The name you use for the anchor can not have any spaces in it.
- The name you use must be a unique name
- Two anchor can not have the same name on the same page.
Example of Hyperlink:
- First Parts:
- Second Part
-
First part being: where you are sending it from: <a href="basic.html#link">Link</a>
-
<a href="">
making it a link
-
basic.html is the page where it is going to.
-
# is used as a identifier to where it is going on that page
-
Link is the word used to have a visible location
-
Second Part: This is located on the page it is going to and location on that page
<h2 id="link">Link</h2>