Basics of web design

Teacher  Juan Romero Luis

Feb 10, 2025

Unit 3

Front-end implementation
HTML5 (I)

bit.ly/BWD24U3

HTML

Ready?

One

Three

Two

Pop Quiz!!

bit.ly/BWD24U3

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.

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

👉

Void Elements

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

🎯 Try the <br> element in VisualStudio Code.

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 Visual Studio Code.

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.

Basics of web design

Teacher  Juan Romero Luis

Feb 11, 2025

Unit 3

Front-end implementation
HTML5 (II)

bit.ly/BWD24U3

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 VisualStudio Code 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

Basics of web design 

Teacher  Juan Romero Luis

Feb 17, 2025

Unit 3

Front-end implementation
HTML5 (III)

bit.ly/BWD24U3

One

Three

Two

Pop Quizm!!

bit.ly/BWD24U3

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

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">

📂 My site folder

     📄site.html

     📂 images

           🏙️ picture.jpg

📂 My site folder

     📄site.html

     🏙️ picture.jpg

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

📂 My site folder

     📂 images

           🏙️ picture.jpg

     📂 folder

          📄site.html

📂 My site folder

     📂 images

           🏙️ picture.jpg

     📂 folder

           📂 folder

                📄site.html

Basics of web design

Teacher  Juan Romero Luis

Feb 18, 2025

Unit 3

Front-end implementation
HTML5 (IV)

bit.ly/BWD24U3

Link, images and paths

Introduction to HTML

📝 Deliverable: Up3.2 Link, images and paths

  1. Create a new HTML document in Visual Studio Code.
  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. 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.

bit.ly/BWD24U3

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

Teacher  Juan Romero Luis

Feb 24, 2025

Unit 3

Front-end implementation
HTML5 (V)

bit.ly/BWD24U3

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.

 

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

  • 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.

Basics of web design

Teacher  Juan Romero Luis

Feb 25, 2025

Unit 3

Front-end implementation
HTML5 (VI)

bit.ly/BWD24U3

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>

iframe element

Multimedia and embedding

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

Basics of web design

Teacher  Juan Romero Luis

May 3, 2025

Unit 3

Front-end implementation
HTML5 (VII)

bit.ly/BWD24U3

One

Three

Two

Pop Quizm!!

bit.ly/BWD24U3

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...

Unit 3. Front-end implementation, HTML5 | Basics of web design 2024/25

By Juan Romero-Luis

Unit 3. Front-end implementation, HTML5 | Basics of web design 2024/25

  • 945

More from Juan Romero-Luis