HTML – Part 2

/ Web Tools / By

If you haven’t read my previous article about HTML and CSS, I encourage you to do so!

Essential to know:

  • HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.
  • Most HTML elements contain opening and closing tags with raw text or other HTML tags between them.
  • HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element.

Basic text tag elements:

  • Any visible content should be placed within the opening and closing <body> tags
  • Headings and sub-headings, <h1> to <h6> tags, are used to provide titles for sections of content.
  • <p>, <span> and <div> tags specify text or blocks.
  • The <em> and <strong> tags are used to emphasize text.
  • Line breaks are created with the <br> tag.
  • Ordered lists (<ol>) are numbered, unordered lists (<ul>) are bulleted, and they are written with <li> to list.
  • Comments are written in HTML using the following syntax: <!– comment –>.
  • Anchor tags (<a>) are used to link to internal pages, external pages or content on the same page.

Interactive & Visual tag elements: Images (<img>) and videos (<video>) can be added by linking to an existing source. The <img> tag allows you to add an image to a web page.

  • IMAGE TAG
  • Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. For instance <img src=”my-image.jpg” />
  • The alt attribute means alternative.The value of alt should be a description of the image if it fails to load on the web page due to various errors that may possibly occur when the network is not stable or it can also be useful when it comes to the Search Engine Optimization. having this attribute can improve the ranking of the site. For instance <img src=”#” alt=”A red car” />
  • VIDEO TAG
  • In this example, the video source (src) is “myVideo.mp4”. The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.
  • After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls such as pausing and playing.
  • The text, Video not supported, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

<video src=”myVideo.mp4″ width=”320″ height=”240″ controls>

Video not supported

</video>

Creating an HTML file:

  • The <!DOCTYPE html> declaration provides the browser with two pieces of information: the type of document and the HTML version to expect, but it doesn’t actually add any HTML structure or content, so it is a void HTML file.
  • To create HTML structure and content, we must add opening and closing <html> tags after declaring <!DOCTYPE html>:

<!DOCTYPE html>

<html>

</html>

  • A browser’s tab displays the title specified in the <title> tag. The <title> tag is always inside of the <head>.

<!DOCTYPE html>

<html>

<head>

<title>Tab Name Here</title>

</head>

</html>

  • The <!DOCTYPE html> declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.

Creating Tables: The Scope Attribute can take one of two values.

  • row – this value makes it clear that the heading is for a row.
  • col – this value makes it clear that the heading is for a column.
  • The table heading element is used just like a table data element, except with a relevant title. Just like table data, a table heading must be placed within a table row.

<table>

<tr>

<th></th>

<th scope=”col”>Saturday</th>

<th scope=”col”>Sunday</th>

</tr>

<tr>

<th scope=”row”>Temperature</th>

<td>73</td>

<td>81</td>

</tr>

</table>

First, a new row was added to hold the three headings: a blank heading, a Saturday heading, and a Sunday heading. The blank heading creates the extra table cell necessary to align the table headings correctly over the data they correspond to. The table will be rendered as follows:


Tables Tag Elements:

  • The <table> element creates a table.
  • The <tr> element adds rows to a table.
  • To add data to a row, you can use the <td> element.
  • Table headings clarify the meaning of data. Headings are added with the <th> element.
  • Table data can span columns using the colspan attribute.
  • Table data can span rows using the rowspan attribute.
  • Tables can be split into three main sections: a head, a body, and a footer.
  • A table’s head is created with the <thead> element.
  • A table’s body is created with the <tbody> element.
  • A table’s footer is created with the <tfoot> element.