HTML - tutorial - 03 - HTML attributes

revision: March 9, 2024

Content

All HTML elements can have attributes

HTML attributes provide additional information about elements.

They are always specified in the start tag and usually come in "name/value" pairs like: name="value".

The href attribute: the <a> tag defines a hyperlink and its "href" attribute specifies the URL of the page the link goes to.

code:
                <a href="https://lwitters.com">Visit my website</a>
            

code;
                <a href="https://wikipedia.org" target="_blank">Visit Wikipedia</a><
            

The src attribute: 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. There are two ways to specify the URL in the "src" attribute:

1/ absolute URL, which links to an external image that is hosted on another website;
2/ relative URL, which links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page.

example: src attribute

code: 
                <img src="../pics/1.jpg" alt="" width="20%" height="auto"/>
            

The width and height attributes: the 'img' tag should also contain the "width" and "height" attributes, which specifies the width and height of the image (in pixels).

example: width, height attribute

code: 
                <img src="../pics/2.jpg" alt="" width="250" height="150"/>
            

The alt attribute: the required "alt" attribute for the 'img' tag specifies an"alternate text" for an image, if the image for some reason cannot be displayed. This can be due to slow connection or an error in the "src" attribute, or if the user uses a screen reader.

example: alt attribute

code: 
                <img src="../pics/3.jpg" alt="holidays" width="250" height="150"/>
            

The style attribute is used to add styles to an element, such as color, font, size, and more.

code:
                <p class="examples" style="color:red;">This is a red paragraph</p>
            

The lang attribute should always be included inside the 'html' tag to declare the language of the Web page. This is meant to assist search engines and browsers. Country codes can also be added to the language code in the "lang" attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.Example: 'html lang="en-UK'.

The title attribute defines some extra information about an element. The value of the "title" attribute will be displayed as a tooltip when you mouse over the element.

code:
                <p class="examples" title="I'm a tooltip">This is a paragraph</p>
            

We suggest to always use lowercase attributes.

The HTML standard does not require lowercase attribute names. The title attribute (and all other attributes) can be written with uppercase or lowercase, like title or TITLE.

We suggest to always quote attribute values.

The HTML standard does not require quotes around attribute values. However, it is recommended to use quotes in HTML. Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

The HTML "class" attribute is often used to point to a class name in a style sheet.

It can also be used by JavaScript to access and manipulate elements with the specific class name.

code:
                <div class="city">
                    <h3>London </h3>
                    <p>London is the capital of England. </p>
                </div> 
                    
                <div class="city">
                    <h3>Paris </h3>
                    <p>Paris is the capital of France. </p>
                </div>
                    
                <div class="city">
                    <h3>Tokyo </h3>
                    <p>Tokyo is the capital of Japan. </p>
                </div>
                <style> 
                    .city{background-color: tomato;color: white; border: 2px solid black; 
                        margin: 20px 60px; padding: 10px;}
                </style>
            

The "class" attribute can be used on any HTML element. The class name is case sensitive!

Syntax for class: to create a class, write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}.

Multiple classes: HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.

code:
                <h3 class="city main">London</h3>
                <h3 class="city">Paris</h3>
                <h3 class="city">Tokyo</h3>
                <style>
                    .city {background-color: tomato;color: white; border: 2px solid black; 
                        margin: 20px 60px; padding: 10px;}
                    .main{text-align:center;}
                </style>
            

Different HTML elements can share the same class: different HTML elements can point to the same class name.

The class name can be used by JavaScript to perform certain tasks for specific elements. JavaScript can access elements with a specific class name with the getElementsByClassName() method.

code:
                <button style="margin-left: 5vw"; onclick="myFunction()">Hide elements </button>
                <h3 class="cities">London </h3>
                <p style="margin-left: 10vw;">London is the capital of England. </p>
                <h3 class="cities">Paris </h3>
                <p style="margin-left: 10vw;">Paris is the capital of France. </p>
                <h3 class="cities">Tokyo </h3>
                <p style="margin-left: 10vw;">Tokyo is the capital of Japan. </p>
                <script>
                    function myFunction() {
                    var x = document.getElementsByClassName("city");
                    for (var i = 0; i < x.length; i++) {
                        x[i].style.display = "none";
                    }
                }
                </script>
            

The HTML "id" attribute specifies a unique id for an HTML element.

The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

                <h3 id="myHeader">My Header</h3>
                <style>
                    #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; 
                        margin: 5px 50px;}
                </style>
            

Note: the id name is case sensitive! The id name must contain at least one character, and must not contain whitespaces (spaces, tabs, etc.).

Difference between class and id: a class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page.

The id attribute can be used by JavaScript to perform some tasks for that specific element. JavaScript can access an element with a specific id with the getElementById() method.

code:
                <button style="margin-left: 5vw;" onclick="displayResult()">Change text </button>
                <script>
                    function displayResult() {
                    document.getElementById("myHeaders").innerHTML = "Have a nice day!";
                    }
                </script>
            

HTML JavaScript

The HTML <script> tag is used to define a client-side script (JavaScript). The <script> element either contains script statements, or it points to an external script file through the "src" attribute.

JavaScript allows to interfere with the attributes of an HTML element. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. To select an HTML element, JavaScript most often uses the "document.getElementById() method".

code:
                <p style="margin-left:3vw;" id="demo"> </p>
                <script>
                    document.getElementById("demo").innerHTML = "Hello JavaScript!";
                </script> 
            

A taste of JavaScript:

                <p style="margin-left:4vw;">JavaScript can change the content of an HTML element: </p>
                <button style="margin-left:5vw;" type="button" onclick="myFunction1()">Click Me! </button>
                <p style="margin-left:5vw;" id="demo1">This is a demonstration. </p>
                <script>
                    function myFunction1() { 
                    document.getElementById("demo1").innerHTML = "Hello JavaScript!";
                    }
                </script>
            

                <div.
                    <p style="margin-left:5vw;" id="demo2">JavaScript can change the style of an HTML element. </p>
                    <script>
                        function myFunction2() {
                            document.getElementById("demo2").style.fontSize = "25px"; 
                            document.getElementById("demo2").style.color = "red";
                            document.getElementById("demo2").style.backgroundColor = "yellow";        
                        }
                        </script>
                    <button style="margin-left:5vw;" type="button" onclick="myFunction2()">Click Me! </button>
                </div>
            

example: script tag

Here, a JavaScript changes the value of the src (source) attribute of an image.

Light On Light Off

                <div>
                    <p style="margin-left:3vw;">Here, a JavaScript changes the value of the src 
                    (source) attribute of an image.</p>
                    <script>
                    function light(sw) {
                        var pic;
                        if (sw == 0) {
                            pic = "pic_bulboff.gif"
                        } else {
                            pic = "pic_bulbon.gif"
                        }
                        document.getElementById('myImage').src = pic;
                    }
                    </script>
                    <img style="margin-left:3vw;" id="myImage" src="pic_bulboff.gif" width="100" height="180">
                    <p>
                        <button style="margin-left:3vw;" type="button" onclick="light(1)">Light On</button>
                        <button type="button" onclick="light(0)">Light Off</button>
                    </p>
                </div>
            

The HTML <noscript>tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts.

HTML file paths

A file path describes the location of a file in a web site's folder structure. File paths are used when linking to external files, like: web pages, images, style sheets, JavaScripts.

Absolute file paths: are the full URL to a file.

Relative file paths: point to a file relative to the current page.

It is best practice to use relative file paths (if possible). When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

HTML - colors

Color names: in HTML, a color can be specified by using a color name: red, blue, green, etc.

Background color: you can set the background color for HTML elements.

Text color: you can set the color of text.

Border color: you can set the color of borders.

Color values: in HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.