Share The Website Don't Just Download The Labs.
Async Activity - Unit 1: Lab 7
Unit 1: HTML Tables
Basic Table Structure
<table>: The main container element that creates the table.<tr>: Defines a table row.<th>: Defines a table header cell. By default, the text inside a header is bold and centered.<td>: Defines a table data cell, which is a standard cell for your content.Example:
Spanning Rows and Columns (rowspan and colspan)
colspan: Use this attribute to make a cell span across multiple columns horizontally.rowspan: Use this attribute to make a cell span over multiple rows vertically.Cell Spacing and Padding
cellspacing: Defines the space between individual cells. The default is 2 pixels.cellpadding: Defines the space between the cell's edges and its content. The default is 2 pixels.HTML5 Multimedia Tags
<audio>: For audio files like .mp3, .wav, and .ogg.<video>: For video files like .mp4, .WebM, and .ogg.Unit 2: Introduction to CSS
How to Apply CSS
1.
style attribute. This is the least flexible method.<table style="color:red;">...</table>.2.
<style> tag in the <head> section of an HTML file. This is useful for styling a single page.3.
.css file and linked from the <head> of each HTML page. This is the recommended method as it allows you to style an entire website from one file, making it much easier to maintain.CSS Selectors: class and id
.): Used to style multiple elements with the same style. You can use the same class name many times on a single page.<p class="first">...</p>.p.first { color: red; }.#): Used to style one unique element on a page. An ID name must be used only once per page.<div id="links">...</div>.#links { border: 1px solid black; }.The CSS Box Model
1.
2.
3.
4.
-top, -right, -bottom, and -left.Sizing Units
px): A fixed-size unit. Can cause issues as text may appear too small or large on different screens.em): A relative unit where 1em is equal to the user's default browser font size. This is a great way to ensure text is readable for everyone.%): A relative unit. For fonts, it works like em (80% is the same as 0.8em). It is also useful for creating responsive layouts, like a table with width: 100%.Global and Text Styling
<body> tag. These styles will "cascade" down to all other elements unless overridden by a more specific style.font-family: A prioritized list of fonts to use.font-size: Sets the size of the text.font-weight: Makes text bold.font-style: Makes text italic or oblique.color: Sets the text color.text-decoration: Adds effects like underline or can be set to none to remove underlines from links.line-height: Controls the vertical space between lines of text.Lab Activities and Tasks
Tutorial 3: Create tickets.html
1.
2.
Lab 7: Polytechnic Restaurant Website
CSS Lab 1: Implementing a CSS file (Suez Canal)
1.
2.
styles.css and save it in the Suez Canal folder.3.
index.html, add a <link> tag in the <head> section to connect to styles.css.4.
styles.css file and observe the changes in the browser.CSS Lab 2: Class and ID Selectors
class and id selectors to the Suez Canal project and then to your HouseBuilder site.1.
1.
styles.css in the history.html file.2.
index.html and history.html, assign classes to the paragraphs: class="first", class="second", class="third".3.
id="links".4.
styles.css file.5.
2.
1.
2.
3.
<p>, <h1>, and <h3> tags. Experiment with properties like font-family, color, and background-color.CSS Lab 3: Implementing Global CSS Styles
layout.html, to ensure consistent styling across the entire Suez Canal site.1.
styles.css in layout.html.2.
first, second, third) and an ID for the links list (links) inside layout.html, just as you did in Lab 2.3.
styles.css to implement the settings for this page.4.
index.html, history.html, layout.html) and that each page has the same styling.