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?

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

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 8, 2024

Unit 3

Front-end implementation
HTML5 (II)

bit.ly/BWD23U3

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

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 14, 2024

Unit 3

Front-end implementation
HTML5 (III)

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

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

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Feb 21, 2024

Unit 3

Front-end implementation
HTML5 (IV)

bit.ly/BWD23U3

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

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

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

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