<!DOCTYPE html>
<!-- This is a comment in HTML (and in XML). -->
<!--
The "DOCTYPE" is generally found on the first line.
The primary purpose of a DOCTYPE is to tell browser and other
software that use the file which set of rules to follow when
interpreting the document, which is most relevant for SGML and XML-based formats.
The DOCTYPE tells the browser (or other software that uses
the file) what version of HTML or other
language is included in the file.
The DOCTYPE shown above says that this file follows the rules
of HTML 5. Starting the HTML 5, the doctype simply needs to say "html".
Earlier versions of HTML required much more complex DOCTYPEs.
There are other DOCTYPE declarations for other types of files
most of which are some sort of XML or similar file type.
-->
<html lang="en">
<head>
<!--
The <head> element is used for info
that doesn't show up INSIDE the browser window.
It includes info ABOUT the page
-->
<!--
The "charcter set" or "charset" describes the types of
text that can be used in this webpage.
UTF-8 data may include non-English text as well as
other symbols (e.g. emojis, etc). UTF-8 is the recommended
character set for modern web pages.
Other values that you might see for charset include the
following:
UTF-16, US-ASCII, ISO-8859-1, windows-1252
-->
<meta charset="UTF-8">
<title>Sample HTML Page</title>
<style>
li {margin: 10px;}
</style>
</head>
<body>
<!--
The <body> element is used for info that is displayed in
the browser window.
-->
<h1>About this webpage</h1>
<div style="background-color: lightgrey;
color: blue;
border: 1px solid black;
padding: 0px 5px;
margin: 0px 5px;">
<p>Webpages are coded with a combination of three different languages:
HTML, CSS and Javascript. The different languages can be located in different
files. They can also all be combined in a single file with a .html extension.</p>
<p>The code for this webpage is located in a single .html file and is
intended to introduce how to use various HTML tags and attributes.
In a later lesson we will focus more on CSS and Javascript.
Note that this file contains mostly HTML with a minimal amount of CSS code.
There is NO Javascript code in this file.
The CSS code appears in the style elements and style attributes found in this page.<br />
<blockquote>
<strong>style elements</strong>:<br />
<strong><span style="color:red;font-size:125%;"> <style> <em>css code goes here</em> </style></span></strong>
<br /><br />
<strong>style attributes</strong>: e.g.<br />
<strong><span style="color:red;font-size:125%"><div style="<em>css code goes here</em>">...<div></span></strong> and<br />
<strong><span style="color:red;font-size:125%"><span style="<em>css code goes here</em>">...<span></span></strong>
</blockquote>
</p>
<p>To work with this code do the following:</p>
<ul>
<li>To <strong><em>see the "rendered page"</em></strong> in a browser, double click
on the html filename.</li>
<li>To <strong><em>edit</em></strong> this code, you must open up this file
in a <em>"text editor".</em></li>
<li>You can also <em><strong>view</strong></em> this code in the browser by
doing one of the following things.
<ol>
<li><strong>"view source"</strong>: right click on a blank section of the
page and choose <strong>"view source"</strong>
<em>(or something similar - the exact text of the menu choice may be
different from browser to browser)</em>.
This opens a simple view of the entire HTML file.
<li><strong>"inspect"</strong>: Right click on a any part of the page
and choose <strong>"inspect"</strong>
<em>(or something similar - the exact text of the menu choice may be
different from browser to browser)</em>.
The inspect option opens the HTML in the "browser tools".
These tools are used by software developers to help
debug problems with the web page. The HTML will open
to the exact HTML code that is used to "render" the
portion of the page that you clicked on.
</li>
</ol>
</li>
</ul>
</div>
<hr />
<h1>Some links</h1>
<p>These are a few of my favorite links:</p>
<a href="https://google.com">My favorite search engine <img src="google-logo.png" width="50" alt="Google logo" /></a><br />
<a href="https://amazon.com">A good place to buy stuff</a>
<h1>Stuff todo</h1>
<p>It would be a good idea for me to get more orgnaized.
Perhaps I should read <a href="https://aimlief.com/organize-your-life">this article</a> .
Here is a list of things that I need to do.
<!-- This is a comment.
In HTML, comments start with "less-than sign, --!""
and end with "--, greater than sign". The comments
do NOT affect the way a webpage looks in the browser.
They are notes to the web developers about the code.
-->
<h2>Monday</h2>
<h3>School Stuff</h3>
<ul>
<li>Do math homework</li>
<li>Study for Tuesday's English test</li>
</ul>
<h3>Other Stuff</h3>
<ul>
<li>Pay electric bill</li>
<li>Call Joe to say hi</li>
</ul>
<!-- hr is an "empty tag", i.e. it doesn't have an end tag.
The slash after the hr indicates that it is an empty tag.
The slash is preferred by some but is not strictly required -->
<hr />
<!-- Some HTML tags contain attributes. They appear
inside either a start tag or an empty tag.
End tags never contain attributes.
Attributes specify options for the tag.
For example, the following horizontal line will
only be 50% of the browser's page width. -->
<hr width="50%" />
<h2>Tuesday</h2>
<ol>
<li>
Buy an umbrella
<img
src="yellowUmbrella.png"
width="50"
alt="a picture of an umbrella"
/>
</li>
<li>Take the test</li>
<li>Make vacation plans</li>
<li>relax after a full night of studying</li>
</ol>
<h1>Another way of organizing the TODO items.</h1>
<p>Tables are useful for displaying data in rows and columns.
Here's an example of a simple HTML table that organizes our
to-do items:</p>
<table style="border-collapse: collapse; width: 80%; margin: 20px 5px;">
<tr>
<th style="border: 1px solid black; padding: 8px; background-color: lightgrey; text-align: left;">Day</th>
<th style="border: 1px solid black; padding: 8px; background-color: lightgrey; text-align: left;">School Stuff</th>
<th style="border: 1px solid black; padding: 8px; background-color: lightgrey; text-align: left;">Other Stuff</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px; vertical-align: top;">Monday</td>
<td style="border: 1px solid black; padding: 8px;">
<ul>
<li>Do math homework</li>
<li>Study for Tuesday's English test</li>
</ul>
</td>
<td style="border: 1px solid black; padding: 8px;">
<ul>
<li>Pay electric bill</li>
<li>Call Joe to say hi</li>
</ul>
</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px; vertical-align: top;">Tuesday</td>
<td style="border: 1px solid black; padding: 8px;">
<ul>
<li>Take the test</li>
</ul>
</td>
<td style="border: 1px solid black; padding: 8px;">
<ol>
<li>Buy an umbrella
<div style="margin-top: 5px;">
<img src="yellowUmbrella.png" width="50" alt="a picture of an umbrella" />
</div>
</li>
<li>Make vacation plans</li>
<li>Relax after a full night of studying</li>
</ol>
</td>
</tr>
</table>
<!--
The table element creates the table structure.
<tr> defines a table row.
<th> defines a table header cell.
<td> defines a regular table data cell.
Notice how table cells can contain complex HTML elements:
- Unordered lists (ul)
- Ordered lists (ol)
- Images (img)
- Divs and other structural elements
The style attributes above add borders, spacing, and colors
to make the table more readable. In a real-world scenario,
you would typically use CSS in the <style> section or in a
separate CSS file instead of inline styles.
-->
</body>
</html>44 42. Introduction to HTML and CSS
This tutorial explores the essential HTML and CSS features found in our sample page. We’ll examine the various elements, tags, attributes, and styling techniques that work together to create web pages.
44.1 Sample HTML Page
Below you can see a rendered version of our sample HTML page, followed by the complete source code. You can also click the following button to download the .html file.
You can then double click on the downloaded file to view the rendered page in your web-browser. You can also edit the downloaded file with the text editor of your choice. After you’ve made some changes to the .html file you can refresh your browser to see the changes. For most browsers, you can refresh the page after changing the HTML code by pressing the F5 button (or Fn-F5 for some laptops) or by clicking on the URL and pressing ENTER.
Download yellowUmbrella.png image file
Download google-logo.png image file
44.2 HTML Document Structure
HTML documents follow a specific structure that includes several key components:
44.2.1 DOCTYPE Declaration
<!DOCTYPE html>This declaration tells browsers that the document follows HTML5 standards. It must appear at the very beginning of an HTML document.
44.2.2 HTML Root Element
<html lang="en">
<!-- content goes here -->
</html>The <html> element is the root of any HTML document. The lang attribute specifies the language of the document, which helps search engines and browsers.
44.2.3 Head Section
<head>
<meta charset="UTF-8">
<title>Sample HTML Page</title>
<style>
li {margin: 10px;}
</style>
</head>The <head> section contains metadata about the document:
<meta charset="UTF-8">: Specifies the character encoding<title>: Sets the page title displayed in the browser tab<style>: Contains CSS rules for styling the page
44.2.4 Body Section
<body>
<!-- visible content goes here -->
</body>The <body> element contains all content that should be visible in the browser window.
44.3 HTML Text Elements
44.3.1 Headings
<h1>About this webpage</h1>
<h2>Monday</h2>
<h3>School Stuff</h3>Heading elements (<h1> through <h6>) create hierarchical headings of decreasing importance.
44.3.2 Paragraphs
<p>Webpages are coded with a combination of three different languages:
HTML, CSS and Javascript.</p>The <p> element creates a paragraph of text.
44.3.3 Text Formatting
<strong>style elements</strong>
<em>css code goes here</em><strong>: Makes text bold to indicate importance<em>: Applies italic formatting to emphasize text
44.3.4 Block Quotes
<blockquote>
<!-- quoted content -->
</blockquote>The <blockquote> element indicates that the enclosed text is an extended quotation.
44.4 HTML Container Elements
44.4.1 Division
<div style="background-color: lightgrey;
color: blue;
border: 1px solid black;
padding: 0px 5px;
margin: 0px 5px;">
<!-- content goes here -->
</div>The <div> element is a generic container for other elements, often used with CSS for styling and layout.
44.4.2 Span
<span style="color:red;font-size:125%">
<!-- inline content -->
</span>The <span> element is an inline container typically used to apply styles to a portion of text.
44.5 HTML Lists
44.5.1 Unordered Lists
<ul>
<li>Do math homework</li>
<li>Study for Tuesday's English test</li>
</ul>The <ul> element creates a bulleted list where items are not in any particular order.
44.5.2 Ordered Lists
<ol>
<li>Buy an umbrella</li>
<li>Take the test</li>
<li>Make vacation plans</li>
</ol>The <ol> element creates a numbered list where items have a specific order.
44.5.3 Nested Lists
Lists can be nested inside other lists for creating hierarchical structures:
<ul>
<li>Item with nested list
<ol>
<li>First nested item</li>
<li>Second nested item</li>
</ol>
</li>
</ul>44.6 HTML Links
<a href="https://google.com">My favorite search engine <img src="google-logo.png" width="50" alt="Google logo" /></a>The <a> (anchor) element creates hyperlinks. The href attribute specifies the URL to link to.
44.7 HTML Images
<img src="yellowUmbrella.png" width="50" alt="a picture of an umbrella" />The <img> element inserts an image. Key attributes include: - src: The image file location - width: The image width - alt: Alternative text for accessibility
44.8 HTML Tables
While not shown in the sample, tables are structured like this:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table><table>: Creates the table container<tr>: Defines a table row<th>: Creates a table header cell<td>: Creates a table data cell
44.9 HTML Horizontal Rules
<hr />
<hr width="50%" />The <hr> element creates a horizontal line. In the second example, the width attribute makes the line half the width of its container.
44.10 CSS Styling
44.10.1 Inline CSS
<div style="background-color: lightgrey;
color: blue;
border: 1px solid black;
padding: 0px 5px;
margin: 0px 5px;">Inline styles apply CSS directly to an element using the style attribute.
44.10.2 Internal CSS
<style>
li {margin: 10px;}
</style>Internal styles use the <style> element in the <head> section to define rules that apply to multiple elements.
44.10.3 CSS Properties Demonstrated
- Text Properties
color: Sets text colorfont-size: Controls text size
- Box Model Properties
margin: Sets space outside an elementpadding: Sets space inside an elementborder: Creates a border around an element
- Background Properties
background-color: Sets the element’s background color
44.11 HTML Comments
<!-- This is a comment in HTML -->
<!--
Multi-line comments
are also possible
-->Comments help document code without affecting the rendered page.
44.12 Cascading Style Sheets (CSS)
CSS is a language that includes “rules” for styling the output with colors, fonts, etc. See the following html file which includes various css rules at the top of the file in the <style> ... </style> section.
Read the comments in the code in this file for directions about how CSS rules work.
<html>
<head>
<title>Stuff To Do</title>
<style>
/* We will now study CSS -
see these pages for more info:
https://www.w3schools.com/cssref/index.php
https://flukeout.github.io/
*/
/* The code that appears in the HTML style element is actually a
different language (i.e. not HTML). This language is known as
Cascading Style Sheets (CSS). CSS is used
to describe formatting (e.g. colors, fonts, placement, etc)
of different items that appear in the webpage.
As with HTML, there are many, many details to CSS. We will be covering
very few of them.
In CSS comments appear between slash* and *slash (where slash is /).
This is a CSS comment.
Some people are surprised that a single .html file could
contain more than one language. This is similar to an English
file that contains some quotes in Hebrew, Chinese, or any
other language.
CSS consists of rules that describe which parts of the HTML document
should be "styled" in a specific ways. Each rule is in the form
selectors { property:value; anotherProperty:value; etc ... }
The selectors define which parts of the HTML are affected by the
rule. Each property:value describes a particular styling that should
be applied. See the examples below.
*/
/* SOME SAMPLE CSS RULES */
/* all li tags should be blue */
li { color: blue;}
/* li tags that are inside ul tags should have a yellow background */
ul li { background-color: yellow; }
/* both h1 and h2 tags should be green */
h1, h2 { color: green; }
/* Text in h2 tags should be centered */
h2 { text-align: center; }
/* strong tags should be red and italicized */
strong { color: red ; font-style: italic;}
/* The .class and #id CSS selectors are used to apply CSS rules
to two very specify situations.
#something is used to apply the rule to any HTML element that has
an attribute of id="something". For example the CSS rule
#copyright { font-size: 75%; }
would be applied to the HTML
<p id="copyright"> © 2023 </p>
.something is used to apply the rule to any HTML element that has
an attribute of class="something" or class="abc def something etc".
For example the CSS rule
.important { font-size: 200%; }
would be applied to any of the following:
<p class="important"> ...</p>
<li class="work important finance"> ... </li>
etc.
The difference between the id attribute and the class attribute
is that an id should only appear once in an entire html page.
id is used for example for copyright notices, navigation sections
etc.
The same class can appear multiple times on a page.
Both the id and the class attributes may appear in ANY html tag.
*/
/* <div>...</div> and <span>...</span>
The <div>...</div> and <span>...</span> HTML elements are used
to apply CSS to portions of a document that don't otherwise
contain other HTML tags. To understand these HTML elements you
need to understand that there are two general types of HTML tags:
* "block HTML elements" (e.g. h1, h2, ul, ol, table, etc)
create the general structure of the HTML.
When these tags are displayed (i.e. "rendered") in the browser, by
default there the next content appears on a new line.
* "inline HTML elements" (e.g. strong, em, a, img, etc) do specific
things, but don't layout the general structure of the page. Therefore
by default there is no automatic newline after these elements.
<span class="someClass"> ... </span>
is used to surround other "inline" HTML tags.
*/
/* CSS RULES FOR #id and .class SELECTORS */
/* tags that have an attribute class="person"
should have its font twice as large as normal */
.person { border: 3px dashed black; }
/*.weekend { font-family: "Comic Sans MS", "Comic Sans", cursive; }*/
/* Use a "fun" cursive font for the weekends */
.weekend { font-family: cursive; }
.important { font-size: 200%; }
/* tags that have an attribute id="navigationLinks"
should have a blue border with 10px of padding around it and
the text should be centered */
#navigationLinks { border: 10px solid blue; padding:10px; text-align: center;}
/* make the one element on the page whose start tag contains the
attribute, id="copyright", 75% of it's normal text font size */
#copyright { font-size: 75%; }
/* SOME CSS SELECTORS ARE STYLED WITH selector:something
FOR EXAMPLE */
/* add the text ".......... and that's ALL!!!" after the last li tag
inside a parent tag */
li:last-child::after { content: " ........ and that's ALL!!!"; }
</style>
</head>
<body>
<h1>Stuff todo</h1><p>this is a new paragraph</p>
<!-- This is a comment.
In HTML, comments start with "less-than sign, --!""
and end with "--, greater than sign". The comments
do NOT affect the way a webpage looks in the browser.
They are notes to the web developers about the code.
-->
<p>I should probably
<a class="important" href="https://aimlief.com/organize-your-life">Read this</a>
as soon as possible.
</p>
<div class="weekend">
<h2>Saturday</h2>
<ul>
<li>Read a good book</li>
</ul>
<h2>Sunday</h2>
<ul>
<li class="person">Wash the car</li>
<li>Take out the garbage</li>
</ul>
</div>
<h2>Monday</h2>
<ul>
<li class="important">Study for Tuesday's test</li>
<li class="important">Don't forget: <strong>Pay electric bill</strong></li>
<li>Call <span class="person">Joe</span> to say hi</li>
</ul>
<!-- hr is an "empty tag", i.e. it doesn't have an end tag.
The slash after the hr indicates that it is an empty tag.
The slash is preferred by some but is not strictly required -->
<hr />
<!-- Some HTML tags contain attributes. They appear
inside either a start tag or an empty tag.
End tags never contain attributes.
Attributes specify options for the tag.
For example, the following horizontal line will
only be 50% of the browser's page width. -->
<hr width="50%" />
<h2>Tuesday</h2>
<ol>
<li>
Buy an umbrella
<img
src="yellowUmbrella.png"
width="50"
alt="a picture of an umbrella"
/> I think it's going to rain today.
</li>
<li>Take the test</li>
<li>Bake a cake for <strong><span class="person">Sue's</span> birthday.</strong></li>
<li>Make vacation plans</li>
<li>relax after a full night of studying</li>
</ol>
</body>
<div id="footer">
<p id="navigationLinks">
<a href="https://google.com">My favorite search engine</a>
<a href="https://amazon.com">A good place to buy stuff</a>
</p>
<p id="copyright">© 2023 Y. Rosenthal</p>
</div>
</html>- You can see the following website for instructions on how to use various
“css selectors” https://flukeout.github.io/
The following websites also provide games for practicing with the CSS selectors that you learned in the above website.
Website: https://css-speedrun.netlify.app/
Answers: https://github.com/Vincenius/css-speedrunWebsite: https://css-selector.netlify.app/
on this page write the selector that correctly selects the one line that contains the words “Select me”
44.13 Additional Resources
For more information on HTML and CSS, check out these resources:
MDN Web Docs
w3schools.com