HTML TAGS AND ELEMENTS

HTML | TAGS AND ELEMENTS

ALSO IN THIS TOPIC
HTML HOME
GETTING STARTED
YOU ARE HERE | HTML TAGS AND ELEMENTS
PAGE STRUCTURE AND LAYOUT
FORMS AND USER INPUT
CSS WITH HTML
HTML QUICK REFERENCE

In this section you can learn about various HTML tags and elements, such as headings (<h1> to <h6>), paragraphs (<p>), lists (ordered <ol> and unordered <ul>), images (<img>), and links (<a>). Emphasize the importance of opening and closing tags, as well as self-closing tags. How to use attributes (e.g., src, href, alt, id, and class) to provide additional information about an element.

REMEMBER | The content on your webpage must go inside the <body> tag, the last 2 tags to close should be the </body> then the </html>. You should only have one pair of <body> tags and one pair of <html> tags, open them at the start and close them at the end.

SECTION 1 | ADDING IMAGES

Whilst adding images may not be the most logical thing to do first, it is fun so here is how to do it. Adding images is easy using the <img> tag.

Firstly save your image a a file type such as png, jpg or gif and try to make sure the file size is not very big to prevent slow loading on the webpage. If you used the folder structure mention above then save your image in the images folder. Make sure your HTML file is in the route folder, in the example above the HTML file would go directly in the MY WEBSITE folder.

<img src = "static/images/cscafelogo1.gif" alt = "Test Image" width = "150" height = "70" >

Using the line of code above replace the cscafelogo1.gif with your own file name. The alt gives you an opportunity to show text if for any reason the image does not appear, in this case we have used the message Test image, but you can change this to say something relating to your image. Finally we set the width and height of the image.

If you image does not load then check your folder structure, the code above gives the image location relative to the HTML file location, in other words it is telling the computer that from the location of the HTML file, go to the 'static' folder, then go to the 'images' folder and that is where the file will be. If you have a different folder structure then you may need to give an absolute path which should contain the full file/path location of the image you are trying to use.

REMEMBER | Make sure you retain the structure of the HTML, you should

Open the <html> tag
Open the <head> tag
Place the content of the head - content here will not show in the webpage
Close the <head> tag
Open the <body tag> - content in the body will appear in the webpage
Place all the stuff you want to show on your webpage
Close the </body> tag
Close the </head> tag

See the example below with the new image code now inside the <body> tags

<!DOCTYPE html>
<html>
<head>
<title>MY WEBSITE</title>
</head>
<body>
<p>Hello World</p>
<h1>My first webpage</h1>
<img src = "static/images/nameofyourimage.gif" alt = "Test Image" width = "150" height = "70" >
</body>
</html>

SECTION 2 | COMMON TAGS

HEADINGS
Headings are used to define the hierarchy and structure of your content. HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Use headings to organize your content and make it easy for readers to understand the flow of information.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

PARAGRAPHS
The <p> tag is used to define paragraphs of text. Browsers automatically add some margin and padding around paragraphs to separate them visually.

<p>This is a paragraph of text.</p>

LISTS
HTML offers two types of lists: ordered lists (<ol>) and unordered lists (<ul>). Ordered lists are numbered, while unordered lists use bullet points. Both list types use the <li> tag for list items.

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

<ul>
<li>First item</li>
<li>Second item</li>
</ul>

SECTION 3 | ADDING LINKS

Adding a link is easy using the <a> tag, you will notice this is slightly different from other tags used so far because the opening tag is usually left open until the link destination has been given as can be seen in the example below, first give the location that the link should go to then give the text that you want displayed on the webpage.

<a href="https://www.computersciencecafe.com">CS CAFE HOME</a>

IMAGE LINKS
You can place elements is links such as images. In the example below if the user clicks on the image it will navigate to an external webpage. Notice the entire code for the image in placed inside the <a> tags.
<a href="https://www.computersciencecafe.com" >
<img src = "static/images/cscafelogo1.gif" alt = "Test Image" width = "150" height = "70" >
</a>

You can also set a common style for the <a> tag in your CSS or you can place the <a> tag inside the tag that holds the style you want to use, for example if you want the link text to be in paragraph style the enclosed in the <p>, as shown below.

<p><a href="Tetris.html">Tetris</a></p>

SECTION 4 | USING ATTRIBUTES

Attributes are used in HTML to provide additional information or functionality to elements. They are added within the opening tag of an element and consist of an attribute name followed by an equal sign and the attribute value enclosed in double quotes. Each attribute has a specific purpose and can help enhance the functionality or appearance of an element.

Most HTML elements require an opening and closing tag, with the content placed in between. However, some elements, like <img>, are self-closing and do not require a closing tag.

By learning and applying various HTML tags and elements, you can create rich, well-structured web pages that effectively communicate your content and provide a pleasant user experience. Here, we'll explore some common attributes and their usage in HTML.

ID
The id attribute assigns a unique identifier to an element, which can be used for styling with CSS or targeting the element with JavaScript. The value of the id attribute should be unique within the HTML document, in this example the word 'unique-identifier1' has been used.

<p id="unique-identifier1">This paragraph has a unique ID.</p>

CLASS
The class attribute is used to apply a shared style or group of styles to multiple elements using CSS. It can also be used to target elements with JavaScript. Unlike the id attribute, the same class value can be assigned to multiple elements.

<p class="highlighted-text">This text has a shared style.</p>
<p class="highlighted-text">This text also has the same style.</p>

REMEMBER | These styles will not be applied until you have created a CSS document and attached it to your webpage, after completing this section it might be a good idea to look GETTING STARTED WITH CSS

SOURCE
The src attribute is used with the <img>, <script>, and <iframe> elements to specify the source of the content. For example, with the <img> element, it defines the URL of the image file. in the example below the 'alt' attribute will provide text in the event that the image is not loaded when viewing the webpage, the text you place here should describe the image.

<img src="image.jpg" alt="A beautiful landscape">

LINKS
The href attribute is used with the <a> element to define the destination URL of a hyperlink. When a user clicks on the link, they will be directed to the specified URL.

<a href="https://www.computersciencecafe.com">Visit our website</a>

TITLE
The title attribute can be added to most HTML elements to provide additional information when the user hovers their cursor over the element. The information is displayed as a tooltip.

<p title="This is a tooltip">Hover over this text to see the tooltip.</p>

STYLE
The style attribute allows you to apply inline CSS styles directly to an HTML element. While it can be useful for quick adjustments or testing, it is generally recommended to use external CSS stylesheets or <style> elements within the <head> section for better organization and maintainability.

<p style="color: red; font-size: 20px;">This text is styled inline.</p>

TARGET
The target attribute is used with the <a> element to specify where the linked document should open. The most common values are _blank (opens the link in a new tab or window) and _self (opens the link in the same tab or window; this is the default behaviour).

<a href="https://www.computersciencecafe.com" target="_blank">Open in a new tab</a>

SECTION 5 | ADDING VIDEOS

The <iframe> tag in HTML is used to embed another HTML document within the current HTML document, essentially creating a window or frame that displays content from an external source. This can be useful for embedding external content, such as videos, maps, or interactive applications, directly into your web page.

To add a video using the <iframe> tag, you typically need to obtain the video's embed code from a video hosting platform like YouTube or Vimeo. These platforms generate an <iframe> code snippet that includes the video's source URL and other necessary attributes.

To embedding a YouTube video using the <iframe> tag:

Find the video you want to embed on YouTube.
Click the "Share" button below the video.
In the Share window, click the "Embed" option.
Copy the provided <iframe> code snippet.

It will look similar to the following:
<iframe width="560" height="315" src="https://www.youtube.com/embed/whzWGc9yLvc" ></iframe>

You can add further attributes to your video depending on the features you want, for example:

width and height: These attributes define the dimensions of the frame in pixels.
frameborder: This attribute controls the appearance of the border around the frame. A value of "0" means no border, while "1" means a visible border.
allow: This attribute lists the features and permissions allowed within the iframe, such as autoplay, clipboard-write, encrypted-media, gyroscope, and picture-in-picture.
allowfullscreen: This attribute allows the video to be played in full-screen mode when the user clicks the full-screen button in the video player.

Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/whzWGc9yLvc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You are now well on your way to becoming good a web design. At this stage you should look to use CSS to add style to your webpages, such as fonts, text align and colours. The using the HTML quick reference guide and the CSS quick reference guide continue to build your webpage and develop your skills. If you think you have mastered this then why not add some Python to control the back-end of your web design.

NAVIGATION

GETTING STARTED | Your first webpage
HTML TAGS AND ELEMENTS | An introduction to common tags and elements
PAGE STRUCTURE AND LAYOUT | The concepts of structuring your page
FORMS AND USER INPUT | Various methods of user input such as text box and drop downs
CSS WITH HTML | The relationship between HTML and CSS
HTML QUICK REFERENCE