Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 7, 2024

Unit 3

Front-end implementation
HTML5 (I)

bit.ly/BWD23U3

HTML

Ready?

One

Three

Two

Surprise exam!!

bit.ly/BWD23U3

Internet protocols

N

Internet protocols

What are internet protocols?

They are a set of rules and conventions that define how devices communicate and exchange data on the Internet.

Internet protocols

Internet protocols

Transmission Control Protocol (TCP) and Internet Protocol (IP)

N

Internet protocols

Hypertext Transfer Protocol and Hypertext Transfer Protocol Secure (HTTP & HTTPS)

N

Internet protocols

Domain Name System (DNS)

N

Internet protocols

File Transfer Protocol (FTP)

Source: john3s.

JSfiddle

🎯 Create a JSfiddle account here.

Introduction to HTML

Introduction to HTML

The basics (again)

Hypertext Markup Language

What is HTML?

Introduction to HTML

Elements

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

Element

Opening tag

Closing tag

 Content 

<h1>This is a heading</h1>

Introduction to HTML

Elements (nesting)

<div>



</div>

​<p>This is a paragraph inside a box.</p>

Closing tag

 Content 

Opening tag

Opening tag

Closing tag

 Element 2 

Element 1

Introduction to HTML

Elements

🎯 Let's practice all together the basic elements to see how HTML behaves in a real environment. Open JSfiddle and create at least four elements. You can use:

  • <h1> to <h6>: Defines HTML headings. <h1> defines the first hierarchical level and <h6> defines the least hierarchical level.
  • <p>: Defines a paragraph.
  • <div>: Used as a container for HTML elements which is used to style (with CSS) and manipulate (with JavaScript) elements with the same class.

Introduction to HTML

Elements

👉

Void Elements

<p>This is some text. <br> This is some more text on a new line.</p>

🎯 Try the <br> element in JSfiddle.

Unique tag

Introduction to HTML

Elements

👉

"Apperiance" elements

<p>This is text in <i>italic</i>.</p>

Opening tag

Closing tag

 Element 2 

 Element 1 

🎯 Try the  <strong>, <i>, <em> in <mark> tags in JSfiddle.

Introduction to HTML

Basic document structure

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My First Web Page</h1>
    <p>This is a paragraph of text on my web page.</p>
  </body>
</html>
  1. The <!DOCTYPE html> declaration at the beginning of the document lets the browser know that it's dealing with an HTML5 document.
  2. The <html> tags encapsulate all the HTML code in the document. Inside these tags, there are two main parts:
  3. The <head> section contains meta-information about the document such as its title, links to stylesheets, scripts, and more. This information is not shown directly on the webpage itself.
  4. The <body> section contains the main content of the webpage. This includes text, images, links, tables, and other elements that users interact with.

Elements

📄 Deliverable Up3.1: My first page in HTML
(to be submitted next class)

Open JSfiddle and apply the appropriate HTML markup to the following content. Do not forget, you need to apply your basic understanding of HTML document structure to complete this exercise correctly.

If you are completely lost, try following these steps:

  1. Create the basic document structure.
  2. Include the tile in the right place (remember what we said about <title> tag).
  3. Organize the content hierarchically by copying and pasting each paragraph individually, and using the appropriate markup.

Introduction to HTML

"Page title:" Overview of Different Types of Fruits
Fruits and Their Types
Fruits are a vital part of our diet because they are rich in essential vitamins, minerals, and fiber. They come in a variety of types, each with unique characteristics and health benefits. Here is a brief overview of some common types of fruits.
Citrus Fruits
Citrus fruits are known for their bright colors and distinctive, tangy flavor. They are a good source of vitamins, especially Vitamin C, and are often consumed for their health benefits. Citrus fruits include oranges, lemons, limes, grapefruits, and many others. These fruits originated in Southeast Asia and have since spread around the world, becoming a staple in many cuisines. Apart from being consumed fresh, citrus fruits are also often used in cooking, baking, and beverages for their unique flavor and aroma.
Orange
Known for its sweet and tangy flavor, oranges are a great source of vitamin C and fiber. They are also high in potassium and antioxidants, which can help boost the immune system and improve heart health
Lemon
Lemons have a sour taste and are commonly used in cooking and baking. They're high in vitamin C and flavonoids, which are known for their antioxidant properties. Lemons can aid in digestion, improve skin health, and even help with weight loss.
Lime
Similar to lemons, limes have a sour taste and are used in many cuisines around the world. They are also high in vitamin C. Limes can help improve digestion, reduce the risk of heart disease, and improve skin quality.
Grapefruit
Grapefruits are a bit bitter and sour, and they're excellent for boosting your immune system because they're high in vitamins A and C. They are also high in dietary fiber which can aid in weight loss and digestion.
Tangerine
These are smaller and sweeter than oranges, making them a tasty and nutritious snack. Tangerines are packed with vitamins, especially vitamin C, and can help improve skin health, boost the immune system, and control blood sugar levels.
Tropical Fruits
Tropical fruits are grown in tropical and subtropical regions of the world and are known for their unique flavors and aromas, high nutritional value, and vibrant colors. Most tropical fruits are high in vitamins, minerals, and fiber, making them an excellent choice for a healthy diet. Here are some examples of tropical fruits.
Banana
Bananas are one of the most commonly consumed fruits in the world, known for their sweet taste and soft texture. They are rich in potassium and vitamin B6, and they provide a quick source of energy due to their high carbohydrate content.
Pineapple
Pineapples are a tropical fruit that is rich in vitamins, enzymes, and antioxidants. They are known for their vibrant tropical flavor and are often used in cooking, baking, and beverages. Pineapples may help boost the immune system, build strong bones, and aid indigestion.
Mango
Often referred to as the "king of fruits," mangoes are incredibly flavorful and sweet, with a slightly tangy taste. They are rich in vitamin C, vitamin A, and antioxidants. Mangoes can be eaten fresh, used in cooking, added to salads, or used in sauces, smoothies, and desserts.
Coconut
Coconuts are versatile fruits used in a variety of ways. The water inside is a refreshing, electrolyte-rich drink, and the meat can be eaten fresh or dried. Coconut oil is used in cooking and skincare due to its high saturated fat content and potential health benefits.
Papaya
Papaya is a tropical fruit known for its vibrant color, sweet taste, and high nutritional value. It is an excellent source of antioxidant nutrients such as carotenes, vitamin C, and flavonoids. Papayas are also known for their digestive enzyme, papain, which is used in digestive supplements and chewing gums.

Hover this buttton for tips

  • You will need to use these tags:

    • <!DOCTYPE html>: This declaration defines the document to be HTML5.
    • <html>: The root element of an HTML page.
    • <head>: Contains meta-information about the document.
    • <title>: Specifies a title for the document.
    • <body>: Contains the visible page content.
    • <h1> to <h6>: Defines HTML headings. <h1> defines the first hierarchical level and <h6> defines the least hierarchical level.
    • <p>: Defines a paragraph.
  • Then you can try to play with “appearance” tags after you finish creating the structure:
    • <strong>: Displays text in bold.
    • <i>: Displays text in italics.
    • <em>: Displays text in italics indicating that should be read with real attention and emphasis.
    • <mark>: Highlights the text for reference or noticeable purposes.
    • <small>: Displays the text in a smaller font size.
    • <del>: Displays the text with a strikethrough, indicating that it has been deleted from the document.
    • <ins>: Displays underlined text, indicating text that has been inserted into the document.
    • <sub>: Displays the text as subscript, which appears lower than the normal text line.
    • <sup>: Displays the text as superscript, which appears higher than the normal text line.
    • <blockquote>: Defines a block of text that is a quotation from another source.
    • <cite>: Defines a citation, used to reference the title of a work.
    • <q>: Defines a short inline quotation.

My First Page solution

Introduction to HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Overview of Different Types of Fruits</title>
  </head>
  <body>
    <h1>Fruits and Their Types</h1>
    <p>Fruits are a <strong>vital part of our diet</strong> because they are rich in essential vitamins, minerals, and fiber. They come in a variety of types, each with unique characteristics and health benefits. Here is a brief overview of some common types of fruits.</p>

    <h2>Citrus Fruits</h2>
    <p><em>Citrus fruits</em> are known for their bright colors and distinctive, tangy flavor. They are a good source of vitamins, especially Vitamin C, and are often consumed for their health benefits. Citrus fruits include oranges, lemons, limes, grapefruits, and many others. These fruits originated in Southeast Asia and have since spread around the world, becoming a staple in many cuisines. Apart from being consumed fresh, citrus fruits are also often used in cooking, baking, and beverages for their unique flavor and aroma.</p>

    <h3>Orange</h3>
    <p>Known for its sweet and tangy flavor, oranges are a great source of vitamin C and fiber. They are also high in <strong>potassium and antioxidants</strong>, which can help boost the immune system and improve heart health.</p>

    <h3>Lemon</h3>
    <p>Lemons have a sour taste and are commonly used in cooking and baking. They're high in vitamin C and flavonoids, which are known for their antioxidant properties. Lemons can aid in digestion, improve <strong>skin health</strong>, and even help with weight loss.</p>

    <h3>Lime</h3>
    <p>Similar to lemons, limes have a sour taste and are used in many cuisines around the world. They are also high in vitamin C. Limes can help improve digestion, reduce the risk of heart disease, and improve <strong>skin quality</strong>.</p>

    <h3>Grapefruit</h3>
    <p>Grapefruits are a bit bitter and sour, and they're excellent for boosting your immune system because they're high in vitamins A and C. They are also high in dietary fiber which can aid in weight loss and digestion.</p>

    <h3>Tangerine</h3>
    <p>These are smaller and sweeter than oranges, making them a tasty and nutritious snack. Tangerines are packed with vitamins, especially vitamin C, and can help improve skin health, boost the immune system, and control blood sugar levels.</p>

    <h2>Tropical Fruits</h2>
    <p>Tropical fruits are grown in tropical and subtropical regions of the world and are known for their unique flavors and aromas, high nutritional value, and vibrant colors. Most tropical fruits are high in vitamins, minerals, and fiber, making them an excellent choice for a healthy diet. Here are some examples of tropical fruits.</p>

    <h3>Banana</h3>
    <p>Bananas are one of the most commonly consumed fruits in the world, known for their sweet taste and soft texture. They are rich in potassium and vitamin B6, and they provide a quick source of energy due to their high carbohydrate content.</p>

    <h3>Pineapple</h3>
    <p>Pineapples are a tropical fruit that is rich in vitamins, enzymes, and antioxidants. They are known for their vibrant tropical flavor and are often used in cooking, baking, and beverages. Pineapples may help boost the immune system, build strong bones, and aid indigestion.</p>

    <h3>Mango</h3>
    <p>Often referred to as the "<strong>king of fruits</strong>," mangoes are incredibly flavorful and sweet, with a slightly tangy taste. They are rich in vitamin C, vitamin A, and antioxidants. Mangoes can be eaten fresh, used in cooking, added to salads, or used in sauces, smoothies, and desserts.</p>

    <h3>Coconut</h3>
    <p>Coconuts are versatile fruits used in a variety of ways. The water inside is a refreshing, electrolyte-rich drink, and the meat can be eaten fresh or dried. Coconut oil is used in cooking and skincare due to its high saturated fat content and potential health benefits.</p>

    <h3>Papaya</h3>
    <p>Papaya is a tropical fruit known for its vibrant color, sweet taste, and high nutritional value. It is an excellent source of antioxidant nutrients such as carotenes, vitamin C, and flavonoids. Papayas are also known for their digestive enzyme, papain, which is used in digestive supplements and chewing gums.</p>
  </body>
</html>

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 8, 2024

Unit 3

Front-end implementation
HTML5 (II)

bit.ly/BWD23U3

Elements

Introduction to HTML

🎯Let's continue with the exercise we started yesterday (40-50 min)

Comments

Introduction to HTML

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- This is another comment -->

🎯 Create a comment in HTML using JSfiddle to see how it behaves.

Lists

Introduction to HTML

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>
<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ol>

Ordered list

Unordered

  • Apple 
  • Banana
  • Cherry
  1. Apple 
  2. Banana
  3. Cherry

🎯 Open JSfiddle and create an unordered list, that lool like this:

  • Fruits I like
    • Apple
      • Red apple
      • Orange apple
    • Banana
      • Plátano de canarias
      • Blue banana
Fruits I like
Apple
Red apple
Green apple
Banana
Plátano de canarias
Blue banana

Hover this button for tips

Tips for creating nested lists:

  • Remember to always encapsulate list items within <li> tags. This stands for 'list item'.
  • Use <ul> for an unordered list. This will create bullet points for each list item.
  • Use <ol> for an ordered list. This will number each list item.
  • If you want to create nested lists (a list within a list), just place a new <ul> or <ol> within an <li> of the parent list.
  • Remember to close each list with a closing </ul> or </ol> tag.
  • If a list item contains multiple paragraphs, wrap those paragraphs within the <li> tags.

Introduction to HTML

Lists

👉

Nested Lists

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 14, 2024

Unit 3

Front-end implementation
HTML5 (III)

bit.ly/BWD23U3

One

Three

Two

Surprise exam!!

bit.ly/BWD23U3

Attributes

Introduction to HTML

<a href="https://www.eg.com">Linked text.</a>

<img src="image.jpg" alt="Description">

Opening tag

Closing tag

Unique tag

Attribute

Attribute 1

Attribute 2

Attributes

Introduction to HTML

<a href="https://www.eg.com">Linked text.</a>

<img src="image.jpg" alt="Description">

Name

Value

Name

Value

Name

Value

Attributes

Introduction to HTML

 🎯 Activity: creating your first link in HTML

In this activity, you will learn how to create hyperlinks in HTML using the <a> tag. In this activity, you are creating a text containing a hyperlink that allows users to get to the contact page when clicking on "contact page" will take the user to "http://www.example.com/contact.html".

Here are the steps to complete this activity:

  1. Open a new HTML document in JSFiddle.
  2. Create the basic structure.
  3. In the <body> section of your HTML document, write a sentence that you would like to add a hyperlink to. For example, "Visit our contact page for more information."
  4. Now, let's turn "contact page" into a hyperlink. To do this, we'll use the <a> tag. The <a> tag requires an href attribute, which specifies the URL of the page the link goes to.

Create your first link in HTML solution

Introduction to HTML

<p>Visit our <a href="http://www.example.com/contact.html">contact page</a> for more information.</p>

Paths

Introduction to HTML

Paths in HTML refer to the way we specify the location of resources such as images, links, or other files that we want to use or reference in our HTML document.

What are paths in HTML?

An absolute path points to the same location in a file system, regardless of the current working directory.

Introduction to HTML

Paths

👉

Absolute pahts

<img src="http://www.example.com/images/picture.jpg">

 📂 example directory

      📂 images

            🏙️ picture.jpg

📂 Directory

     📄mysite.html

Absolute path

A relative path is a path relative to the current working directory.

Introduction to HTML

Paths

👉

Relative Paths

<img src="picture.jpg">

📂 Directory

     📄site.html

     📂 images

           🏙️ picture.jpg

📂 Directory

     📄site.html

     🏙️ picture.jpg

<img src="images/picture.jpg">
<img src="../images/picture.jpg">
<img src="../../images/picture.jpg">

📂 Directory

     📂 images

           🏙️ picture.jpg

     📂 folder

          📄site.html

📂 Directory

     📂 images

           🏙️ picture.jpg

     📂 folder

           📂 folder

                📄site.html

Paths

Introduction to HTML

🎯 Step by step activity. Be quite and pay attention to your teacher.

N

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 21, 2024

Unit 3

Front-end implementation
HTML5 (IV)

bit.ly/BWD23U3

Link, images and paths

Introduction to HTML

📝 Deliverable: Up3.2 Link, images and paths

  1. Create a new HTML document in Replit.
  2. Within the <body>, introduce an "About Me" section using <h1> tag.
  3. Write a short paragraph about yourself using <p> tag.
  4. Find a picture of a place you would like to visit on the internet. Right-click on the image and copy the image address. Paste the URL into the src attribute of an <img> tag to add this image to your page. Remember to include the alt attribute to describe the image and the width attribute to establish the size you want the picture to be shown.
  5. Now, download a different picture image and save it in the same directory as your HTML file (first your computer and then upload it to Replit directory). Add another image again to your website using <img>, but this time use a relative path in the src attribute.
  6. Add a link to the website where you found the image using the <a> tag. The text of the link should say "Image source".
  7. Figure out how you would hyperlink the first image you included.

Introduction to HTML

Link, images and paths

👉

Common mistakes

Remember to use quotation marks when inserting attribute values

If an image does not display, ensure the correct path has been included. Verify in which folder the image is located

Although links can be unnested, if you are linking text, it must be nested within a paragraph or heading

<p>
Paragraph is here with a 
<a href="https://example.com">link</a>.
</p>
name="value"
<img src="image/image.jog">

Links

Introduction to HTML

<a href="https://www.example.com" target="_blank" title="Visit Example Website">Click here.</a>

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 22, 2024

Unit 3

Front-end implementation
HTML5 (V)

bit.ly/BWD23U3

📥 Download and install the latest stable version of Visual Studio Code from https://code.visualstudio.com/

bit.ly/BWD23U3

HTML tables

Basic tables

HTML tables

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1 of Row 2</td>
    <td>Cell 2 of Row 2</td>
  </tr>
  <tr>
    <td>Cell 1 of Row 3</td>
    <td>Cell 2 of Row 3</td>
  </tr>
</table>
Header 1 Header 2
Cell 1 of Row 2 Cell 2 of Row 2
Cell 1 of Row 3 Cell 2 of Row 3
  • <table>: This tag defines the table itself. Every table begins and ends with this tag.
  • <tr>: This stands for 'table row'. This tag is used to define each row in the table.
  • <th>: This stands for 'table header'. This tag is used to define a header cell in the table, which is typically used to label columns or rows.
  • <td>: This stands for 'table data'. This tag is used to define each cell in the row.

 

Basic tables

HTML tables

 🎯 Activity: Basic tables

Create a simple table (from scratch, please). You can use the text in the white box:

Header 1, Header 2
Cell 1 of Row 2, Cell 2 of Row 3
Cell 1 of Row 3, Cell 2 of Row 3
/* Copy and paste this code in CSS 
section to see the table borders: */

th, td {
    padding: 12px 15px;
    text-align: center;
    border: 1px solid #009879;
}

/* if you are woking locally do not 
forget to include the link attribute */
<link rel="stylesheet" href="styles.css">

Complex tables

HTML tables

  • <thead>: This element is used to group the header content in an HTML table. 
  • <tbody>: This element is used to group the body content in an HTML table. 
  • <tfoot>: This element is used to group the footer content in an HTML table. It is used to store information such as total, sum, etc., that is calculated from the data in the table cells.

Header 1 Header 2
Cell 1 of Row 2 Cell 2 of Row 2
Cell 1 of Row 3 Cell 2 of Row 3
Footer 1 Footer 2

Complex tables

HTML tables

 🎯 Activity: Complex table (1)

Using the table you have already created:

  1. Create 2 more rows and 2 more columns.
  2. Incorporate the elements <thead>, <tbody>, and <tfoot> to structure your table with a head, body, and footer.

If you do not know how to do it, try to figure that out on your own. Take into account that <thead>, <tbody>, and <tfoot> are elements and behave as such.

Your table might look the same, but now it is well organized for machines to understand the content. 

Header 1 Header 2 Header 3 Header 4
Cell 1 of Row 2 Cell 2 of Row 2 Cell 3 of Row 2 Cell 4 of Row 2
Cell 1 of Row 3 Cell 2 of Row 3 Cell 3 of Row 3 Cell 4 of Row 3
Footer 1 Footer 2 Footer 3 Footer 4

Complex tables

HTML tables

  • colspan is used to make a cell span multiple columns. For example, if you want a cell to span 3 columns, you would use <td colspan="3">. 
  • rowspan is used to make a cell span multiple rows. For example, if you want a cell to span 2 rows, you would use <td rowspan="2">. 

Complex tables

HTML tables

 🎯 Activity: Complex table (2)

Incorporate the colspan and rowspan attributes to make your table look like this one.

Remember, colspan and rowspan are attributes and behave as such.

Complex tables

HTML tables

📝 Deliverable: Up3.3 Tables in HTML

Upload the html document you have been working on in class.

Complex tables solution

HTML tables

<!DOCTYPE html>
<html>
  <head>
    <title>Overview of Different Types of Fruits</title>
  </head>
  <body>
    <table>
      <caption>Title of the table</caption>
        <thead>
          <tr>
            <th colspan="2">Header 1 and 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">Row 1 and 2, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
            <td>Row 1, Cell 4</td>
          </tr>
          <tr>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
            <td>Row 2, Cell 4</td>
          </tr>
          <tr>
            <td>Row 3, Cell 1</td>
            <td>Row 3, Cell 2</td>
            <td>Row 3, Cell 3</td>
            <td>Row 3, Cell 4</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">Footer spans all 4 columns</td>
          </tr>
        </tfoot>
      <caption>Table caption.</caption>
    </table> 
   </body>
</html>

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 28, 2024

Unit 3

Front-end implementation
HTML5 (VI)

bit.ly/BWD23U3

Multimedia and embedding

Images in HTML

Multimedia and embedding

<img src="image.jpg" alt="A beautiful sunset over the mountains" width="500" height="600" title="Sunset over the Rockies">

Vector graphics in HTML

Multimedia and embedding

<!-- using img tag to insert an SVG file -->
<img src="image.svg" alt="Description of SVG">
<!-- inline SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

N

Vector graphics in HTML

Multimedia and embedding

N

🎯 Step by step activity. Be quite and pay attention to your teacher.

Video in HTML

Multimedia and embedding

N
<video src="sample.mp4" alt="Description of the video" width="320" height="240" controls autoplay loop muted>
 <p> Your browser does not support the video tag. </p>
</video>
N

WELCOME to "weird things your teacher has at home and don't know what to do with them"

The first student who notices that I previously mentioned there are no exceptions in the way we include attributes, and realizes that there are attributes without values, will win a weird prize!

iframe element

Multimedia and embedding

N
<iframe src="https://www.example.com" title="Example Website" width="500" height="300" frameborder="1" allowfullscreen></iframe>

iframe element

Multimedia and embedding

Leave this slide still until the end.

🎯 Activity: Practice with iframes

Now that you've learned about iframes, it's time to put your knowledge into practice. Follow the steps below:

  1. Create an HTML document and include the basic HTML tags (<!DOCTYPE html>, <html>, <head>, <title>, and <body>).
  2. Inside the <body> tag, create an iframe that embeds a website of your choice. You can use the syntax provided above as a guide.
  3. If you do not find any link that works try this: https://slides.com/oluisjuan/bwd23-u3/embed
  4. Include the title, width, and height attributes in your iframe tag. Set the width and height to a size that fits well within your webpage.
  5. Save your changes and open your HTML document in a web browser to see the result.

Remember, not all websites allow their content to be embedded with iframes, so you might need to try a few different URLs.

Only if you finished and are bored, click here

🎯 Extra activity

Open any website and use your browser inspector to identify the different elements used to add multimedia content. Try to spot an image, a video, an iframe and an svg.

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 29, 2024

Unit 3

Front-end implementation
HTML5 (VII)

bit.ly/BWD23U3

Fundamental elements to include in <head>

Language (ISO)

Fundamental elements to include in <head>

<!DOCTYPE html>
<html lang="en">
...
</html>

ISO Language Codes

Title tag

Fundamental elements to include in <head>

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Introduction to HTML - Web Development Course</title>
  </head>
  ...
</html>

Meta tag

Fundamental elements to include in <head>

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Introduction to HTML - Web Development Course</title>
      <meta charset="UTF-8">
      <meta name="author" content="Author Name">
      <meta name="description" content="Free Web tutorials">
      <meta http-equiv="refresh" content="30">
      <meta name “robots” content=”noindex”>
  </head>
  ...
</html>

Linking to .css and .js documents

Fundamental elements to include in <head>

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Introduction to HTML - Web Development Course</title>
      <meta charset="UTF-8">
      <meta name="author" content="Author Name">
      <meta name="description" content="Free Web tutorials">
      <meta http-equiv="refresh" content="30">
      <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  ...
</html>

Linking to .css and .js documents

Fundamental elements to include in <head>

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Introduction to HTML - Web Development Course</title>
      <meta charset="UTF-8">
      <meta name="author" content="Author Name">
      <meta name="description" content="Free Web tutorials">
      <meta http-equiv="refresh" content="30">
      <link rel="stylesheet" type="text/css" href="mystyle.css">
      <script src="myscripts.js"></script>
  </head>
  ...
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Introduction to HTML - Web Development Course</title>
      <meta charset="UTF-8">
      <meta name="author" content="Author Name">
      <meta name="description" content="Free Web tutorials">
      <meta http-equiv="refresh" content="30">
      <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
  	<!-- Your HTML code -->
  	<script src="myscripts.js"></script>
  </body>
</html>

Is this a void element?

HTML Cheat Sheet

Cheating, cheating, cheeeating, cheating, cheaaating, cheating, cheaaaating, cheating, cheaaating, chetttating, cheating, cheating, cheaaaaating, cheaaaaaating, cheating, cheeeating, cheating, cheeeeating, cheeeeating, cheaaaating, cheating, cheeeeating, cheeeeating, cheating, cheating, cheeeeating, cheeeeating, cheaaaating, cheating, cheating, cheaaaating, cheating, cheating, cheating, cheaating, cheating, cheaaaating, cheating, cheaaating, cheating, cheeeeating, cheaeting, cheating, cheating, cheaaaating, cheating, cheaaating, chating, cheaaating, cheating, cheating, cheating, cheeeating, cheeeating, cheating, cheaaating, cheating, cheaaaating, cheating, cheaaating, chetttating, cheating, cheating, cheaaaaating, cheaaaaaating, cheating, cheeeating, cheating, cheeeeating, cheeeeating, cheaaaating, cheating, cheeeeating, cheeeeating, cheating, cheating, cheeeeating, cheeeeating, cheaaaating, cheating, cheating, cheaaaating, cheating, cheating, cheating, cheaaaating, cheating, cheaaaating, cheating, cheaaating, cheating, cheeeeating, cheating, cheating, cheating, cheaaaating, cheating, cheaaating, cheeeating, cheaaating, cheating, cheating, cheating, cheeeating, cheeeating, cheating, cheaaating, cheating, cheaaaating, cheating, cheaaating, chetttating, cheating, cheating, cheaaaaating, cheaaaaaating, cheating, cheeeating, cheating, cheeeeating, cheeeeating, cheaaaating, cheating, cheeeeating, cheeeeating, cheating, cheating, cheeeeating, cheeeeating, cheaaaating, cheating, cheating, cheaaaating...