Alt Attributes

<!DOCTYPE html>
<html>
<Head>
<title>The alt Attribute </title>
</head>
<body>
<p>The alt attribute should reflect the image content, so users who cannot see the image and get an understanding of what the image contains:</p>
<img src="well_done_faithfull.jpg" alt="Person walking on stairs into a cloud with Jesus waiting" width="100" height="100"/>
</body>
</html>

Results

The alt Attribute

The alt attribute should reflect the image content, so users who cannot see the image and get an understanding of what the image contains:

Person walking on stairs into a cloud with Jesus waiting

href Attributes

All HTML elements can have attributes
Attributes usually come in name/value pairs like: name="value"
Attributes provide additional information about elements
Attributes are always specified in the start tag.
The href attributes specifies the URL of the page the link is going to.
Example:
< a href ="https://www.learningcodeforgod.net">Visit Leaning Code for God </a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>href</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. <br>The link address is specified in the href attribute:</p>
<p><a href="https://www.christisalive.net"> Visit Christ Is Alive Ministry</a>
</p>
</body>
</html>

Results

The href Attribute

HTML links are defined with the a tag.
The link address is specified in the href attribute:

Visit Christ Is Alive Ministry

Lang Attributes

All HTML elements can have attributes

Attributes usually come in name/value pairs like: name="value"

Attributes provide additional information about elements

Attributes are always specified in the start tag.

The <img>tag will also containt the height and width attributes, which specify the height and width of the image (in pixels)

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A very important line <title>
</head>
<body>
Included inside the html tag, to declare the language and country of the Web page.
<html lang="en-US"> the first character en is english and the second two characters US is United States</p>
</body>
</html>

Results

Included inside the html tag, to declare the language and country of the Web page. <html lang="en-US"> the first character en is english and the second two characters US is United States

Style Attributes

The style Attribute is used to add styles to an element such as color
All HTML elements can have attributes

Attributes usually come in name/value pairs like: name="value"

Attributes provide additional information about elements

Attributes are always specified in the start tag.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A very important line <title>
<style>

h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>The style attribute is used to add styles to an element, such as color</p>

Inside the style tags are "external CSS" while below is "Inline CSS"

<h1 style="color: ???;"> This heading is red </h1>

<p style="color: ????;"> This paragraph is blue.</p>
</body>
</html>

Results

The style attribute is used to add styles to an element, such as color

Inside the style tags are "external CSS" while below is "Inline CSS"

This heading is red

This paragraph is blue.

*/NOTE: Where the ?? are you can place the "color-word=red, hex value #ff000 or the rgb code rgb 255.0.0 will give you the color of red> */

Width and Height Attributes

All HTML elements can have attributes

Attributes usually come in name/value pairs like: name="value"

Attributes provide additional information about elements

Attributes are always specified in the start tag.

The <img> tag will also contain the height and width attributes, which specify the height and width of the image (in pixels)

Always specify the "border-style" property to set the borders first or the "border-width" property will not work, must be together to work. </p>

<h2>The border-width Property</h2>
<p>The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>

<p>Note: If you are placing different px for each side do not use ; between them. </p>

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px 25px 45px 100px;
border-color: red;
}
p.two {
border-style: solid;
border-width: 10px 40px;
}
p.three {
border-style: solid;
border-width: medium;
}
p.four {
border-style: solid;
border-width: 25px 60px;
}
p.five {
border-style: dotted;
border-width: 25px 2px;
}
p.six {
border-style: dotted;
border-width: thick;
}
p.seven {
border-style: double;
border-width: 15px;
}
p.eight {
border-style: double;
border-width: thick;
}
p.nine {
border-style: solid;
border-width: medium;
}
p.ten {
border-style: dotted;
border-width: 2px;
}
p.eleven {
border-style: dotted;
border-width: thick;
}
p.twelve {
border-style: double;
border-width: 15px;
}
p.thirteen {
border-style: double;
border-width: thick;
}

</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">width, height and color.</p>
<p class="two">width, height Second number is the left and right. </p>
<p class="three">width and height.</p>
<p class="four">width and height.</p>
<p class="five">width, height First number is the top and bottom.</p>
<p class="six">width and height.</p>
<p class="seven">width and height.</p>
<p class="eight">width and height.</p>
<p class="nine">width and height.</p>
<p class="ten">width and height.</p>
<p class="eleven">width and height.</p>
<p class="twelve">width and height.</p>
<p class="thirteen">width and height.</p>
</body>
</html>

Results

The border-width Property

This property specifies the width of the four borders:

width, height and color.

width, height Second number is the left and right.

width and height.

width, height First number is the top and bottom.

width and height.

Double or Single Quote

When to use Double or Single Quote

When the attribute value itself contains double quotes, it is necessary to use single quotes.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Single or Double Quotes</title>
</head>
<body>
<p>When the attribute value itself contains double quotes, it is necessary to use single quotes:</p>
<p>American English, states that use of double quotation marks (" ") for direct quotes and titles, while single quotation marks (' ') are used for quotes within a quote;</p>

<p>The book of "Bobby 'Lee' Jones" was not as good as I had been told. </p>
</body>
</html>

Resultes

When the attribute value itself contains double quotes, it is necessary to use single quotes:

American English, states that use of double quotation marks (" ") for direct quotes and titles, while single quotation marks (' ') are used for quotes within a quote;

The book of "Bobby 'Lee' Jones" was not as good as I had been told.

src attributes

All HTML elements can have attributes

Attributes usually come in name/value pairs like: name="value"

Attributes provide additional information about elements

Attributes are always specified in the start tag.

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed.

Example

img src >="repel.jpg">

In the src attribute there are two ways to specify the URL

1. ABSOLUTE URL = Links to an external image. This image would be hosted on another website. An example of this would be: src="http:www.learningcodeforgod.net/../rep.jpg".

Note: If the web site or the image is removed then you will loose it. Also the image may have copy rights.

2. RELATIVE URL = Using images that is hosted within the website, you have control of the image.

Also the links do not include the domain name:

If the URL begins without a slash, it will be relative to the current page. An Example of this would be: src="smiley.jpeg".

Now if the URL begins with a slash then it will be relative to the domain. Example of this would be: src="/learningcodeforgod.net/smiley.jpeg"

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>src attributes <title>
<style>
</style>
</head>
<body>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>
<img src="well_done_faithfull.jpg" alt="" width="100" height="100"/>
</body>
</html>

Results

In the src attribute there are two ways to specify the URL
ABSOLUTE URL = Links to an external image. This image would be hosted on another website. An example of this would be: src="http:www.christisalive.net/../rep.jpg".
Absolute includes all the information needed to find the resource, such as:

The protocol (HTTP or HTTPS)

The domain name

The subdomain (if any)

The path to the resource

Sometimes the Port numbers and query parameters

RELATIVE URL = Using images that is hosted within the website, you have control of the image.

Also the links do not include the domain name:

If the URL begins without a slash, it will be relative to the current page.

An Example of this would be: src="smiley.jpeg".

Now if the URL begins with a slash then it will be relative to the domain. Example of this would be: src="/christisalive.net/smiley.jpeg"

Meaning that the location is in the domain of christisalive.net

A relative URL is a URL that only includes the path. The path is everything that comes after the domain, including the directory and slug.

(A slug is a human-readable, unique identifier, used to identify a resource instead of a less human-readable identifier like an id.)

You use a slug when you want to refer to an item while preserving the ability to see, at a glance, what the item is.

Because relative URLs don’t include the entire URL structure, it is assumed that when linking a relative URL, it uses the same protocol, subdomain and domain as the page it’s on.

Here’s an example of a relative URL:

src="repel.jpg"