Coding Explanation
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header" id="header">Mrs. Leung Web Design Class <table width="200" border="1" class="table">
<tbody>
<tr>
<td><a href="https://www.google.com/search?q=google+search&rlz=1C5GCEM_enCA968CA968&oq=google+search&aqs=chrome..69i57j0i512l2j0i433i512j0i131i433i512j0i433i512j0i512l3j0i131i433i512.5660j0j7&sourceid=chrome&ie=UTF-8"> Search </a></td>
</tr>
</tbody>
</table>
<table width="2000" border="1">
<tbody>
<tr>
</tr>
</tbody>
</table>
<div class="nav" id="nav">
<ul>
<li> <a href="Index.html">Home</a></li>
<li><a href="webdesign.html">Web Design</a></li>
<li><a href="classroom.html">Class Room</a></li>
<li><a href="rubric.html">Rubric
<img src="Screen Shot 2021-09-24 at 10.02.30 AM.png" alt="" width="719" height="467" class="image1"/></a>
</li>
</ul>
<div class="text test" id="text">
<p> Text </p>
<p>Here is a text box </p>
<img src="../../../Screen Shot 2021-10-08 at 2.00.03 PM.png" alt="" width="599" height="395" class="image4"/>
<table width="500" border="1">
<tbody>
<tr>
<td> Hello</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
​
​
Coding Explanation
​
This is an HTML file (a basic webpage). It includes:
-
A <head> section with metadata and a link to a CSS file.
-
A <body> section with:
-
A container for the page content.
-
A header with a table and a search link.
-
A navigation menu with links.
-
Some images and another table inside a text section.
-
​
Breakdown of Each Part:
1. DOCTYPE and HTML Structure
<!doctype html> <html>
-
Declares the document as HTML5.
-
Starts the HTML document.
​
2. Head Section
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css style.css" rel="stylesheet" type="text/css"> </head>
-
meta charset="UTF-8": Ensures your page uses UTF-8 character encoding (supports most characters).
-
<title>: Sets the page title (what shows in the browser tab).
-
<link>: Supposed to link a CSS file, but the filename has a space: "css style.css". This may cause the CSS not to load unless the file name actually includes the space.
​
3. Body and Container
<body> <div class="container">
-
Starts the visible content of the page.
-
.container is a wrapper for the main content.
4. Header Section
<div class="header" id="header"> Mrs. Leung Web Design Class <table width="200" border="1" class="table"> ... </table>
-
A header area with a class and ID.
-
Displays "Mrs. Leung Web Design Class".
-
Contains a small table with a single row and a single cell linking to a Google search.
​
5. Search Link Table
<a href="https://www.google.com/search?q=google+search..."> Search </a>
-
This link goes to Google and searches for "google search".
-
adds space.
​
6. Empty Table
<table width="2000" border="1">
<tbody>
<tr></tr>
</tbody>
</table>
-
This table is empty. It sets a width but has no content inside.
​
7. Navigation Menu
<div class="nav" id="nav"> <ul> <li><a href="Index.html">Home</a></li> <li><a href="webdesign.html">Web Design</a></li> ... </ul>
-
Basic unordered list (<ul>) acting as a navigation menu.
-
Links to other pages (like Index.html, webdesign.html, etc.).
​
8. Rubric Link with Image
<li><a href="rubric.html">Rubric
<img src="Screen Shot 2021-09-24 at 10.02.30 AM.png" ... /></a>
</li>
-
This list item includes a link with an embedded image.
-
Image filename has spaces, which may cause loading issues unless the file is named exactly that.
​
10. Hello Table
<table width="500" border="1">
<tr>
<td> Hello</td>
</tr>
</table>
-
A simple table with one row, one cell saying “Hello”.
​
11. Closing Tags
</div> <!-- closes text section -->
</div> <!-- closes nav -->
</div> <!-- closes header -->
</div> <!-- closes container -->
</body>
</html>
​
​
​
Symbols Meaning
​
Top of the HTML document:
<!doctype html>
-
<!doctype html>: Declares the document type and version of HTML (HTML5 here). Tells the browser this is an HTML document.
​
HTML Structure Tags:
<html> ... </html>
-
<html>: Root element of the HTML document.
-
Everything inside is considered part of the webpage.
​
<head> ... </head>
-
<head>: Contains metadata (info about the page like title, linked CSS, character set, etc.).
​
<body> ... </body>
-
<body>: Contains everything that will appear in the main content area of the browser window (what users see).
​
Inside <head>:
<meta charset="UTF-8">
-
Tells the browser to use UTF-8 character encoding (supports most characters and languages).
​
<title>Untitled Document</title>
-
Sets the title that appears in the browser tab.
​
<link href="css style.css" rel="stylesheet" type="text/css">
-
Links a CSS file to style the HTML.
​
Divs and Classes:
<div class="container"> ... </div>
-
<div> is a container used to group content.
-
class="container" assigns a class name for CSS styling.
​
<div class="header" id="header"> ... </div>
-
id="header" uniquely identifies the element.
-
class="header" lets you style this section via CSS.
​
Tables:
<table width="200" border="1" class="table">
-
Creates a table with a width of 200 pixels and a 1-pixel border.
-
class="table" allows styling via CSS.
​
<tr> ... </tr>
-
Table Row.
<td> ... </td>
-
Table Data cell (like a column inside a row).
​
Anchor Tag (Link):
<a href="https://www.google.com/search?q=google+search...">Search</a>
-
<a> is an anchor (link).
-
href="..." is the link destination.
-
Text between <a> and </a> is clickable.
​
Image Tag:
<img src="image.png" alt="" width="719" height="467" class="image1"/>
-
Displays an image.
-
src="...": Source path to image.
-
alt="...": Alternative text (shown if image can't load).
-
width and height: Image size.
-
class="image1": CSS class for styling.
-
​
Navigation List:
<ul> ... </ul>
-
Unordered list (bulleted list).
​
<li><a href="...">Link</a></li>
-
Each <li> is a list item.
-
Contains an <a> tag to make it a link.
​
Paragraphs and Text:
<p> Text </p> <p>Here is a text box </p>
-
<p> creates a paragraph.
-
is a non-breaking space (HTML entity for a space that doesn't collapse or wrap).
​
Summary of Special Symbols:
​
Symbol Meaning
​
<!doctype>. Declares HTML version
​
<html> ... </html> Root HTML element
​
<head> Contains metadata (title, links, etc.)
​
<body> Visible page content
​
<div> Division/container
​
<a href="..."> Link
​
<img src="..."> Image
​
<ul>, <li> List and list item
​
Non-breaking space (a fixed-width space)
​
class="..." Assigns a CSS class
​
id="..." Assigns a unique identifier
​
<table>, <tr>, <td> Table, row, and cell