Intro To HTML CSS

Intro to HTML / CSS
Rachel Starry
Ursinus College, Tech Play Day
May 31, 2018
What is HTML?
* HTML = Hyper Text Markup Language

* HTML is the standard language for creating
web pages.
HTML Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
HTML5 2014
Hyper Text Markup Language
* “HyperText” uses hyperlinks: these allow you

to jump around in a text, permitting non-linear
reading.
* Linear reading (novels) vs. non-linear reading

(web pages)
* Your web browser interprets HTML

documents to render text, images, etc. into
multi-media web pages, using markup syntax.
* Markup allows you to include metadata (data

about data) in your document.
* Markup documents use tags to define

elements within a text, and to give those
elements special attributes.
* In HTML documents, opening and closing tags

turn elements and attributes on and off.
this… <b>HELLO WORLD!</b>
displays like this… HELLO WORLD!
HTML Markup Tags
* Tags for document definition and organization.

<!DOCTYPE html> tells the browser it will be reading an
HTML file
<html></html> turns HTML on and off
<head></head> defines the section of the document that
contains metadata (data about data)
<title></title> use in the “HEAD” section to define the
title of the document
<body></body> defines the section of the document with
visible text/media content
<p></p> defines individual paragraphs within the
“BODY” section
Your First HTML Document
Choose your favorite text editor or try this one: www.sublimetext.com
<!DOCTYPE html>
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<p>This is where we put content.</p>
</body>
</html>
More HTML Markup Tags
* Tags for text formatting and headings.

<b>text</b> turns on/off bolding
<i>text</i> turns on/off italics
<h1>text</h1> Heading level 1
… …
* TASK: Add a heading (H1) to the body of your document. Then

add two sentences to your paragraph tag: bold the first
sentence and italicize the second sentence.
HTML Tags with Attributes
* Two important tags that require attributes:

* <a></a> -- (anchor) defines hyperlinks
Example: <a href=“www.google.com”>Click here.</a>
* <img> -- inserts an image; does not have a closing tag!

Example: <img src=“https://imageurl.jpg”>
* TASK: Add a new paragraph to the body of your document. To

this add a sentence with a hyperlink to any website, followed by
an image from https://commons.wikimedia.org. (Access an
image’s URL by right-clicking and selecting “Copy image
address,” then paste the URL into your HTML document.)
Hyperlinks & Images
* Both hyperlink and image tags can be expanded with

additional attributes.
<a href=“www.google.com” title=“Description of link”>Click
here.</a>
<img src=“https://upload.wikimedia.org/wikipedia/commons/
thumb/d/dc/Fromia_monilis_%28Seastar%29.jpg” alt=“Description of
image” width=500 height=300>
* TASK: Add a title to your hyperlink and one or more size attributes
to your image. How does your image change when you define one
or more size attributes? What might be a drawback of using these?
* Bonus: Images can be wrapped in anchor tags, just like text! Try
adding an ‘alt’ attribute to your image and wrapping it in <a>…</a>.
What happens when you hover over the image now?
Tables in HTML
<table align=“center” border=“1” cellpadding=“0”>

<tr>
<th>Column A</th>
(header row) <th>Column B</th>
<th>Column C</th>
</tr>
<tr>
<td>Cell 1</td>
(row 1) <td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
(row 2) <td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
Tables in HTML
* TASK: Try to replicate the table below. Hint: play around with the
attribute values to see how they change the appearance and
layout of the table! Make sure
to save your .html file when
you’ve finished.
Required table elements:

<table align=“…” border=“…” cellpadding=“…”></table>
<tr></tr>
<th></th>
<td></td>
Quick Intro to CSS
* CSS = Cascading Style Sheets
* While HTML describes what elements to render on a

web page, CSS determines how those elements
appear – often called the “look and feel” of a page.
CSS Version Year
CSS 1994
CSS2 1998
CSS3 1999
Interactive Sandbox
* For an interactive HTML/CSS sandbox, go to

https://codepen.io and select “Create -> New Pen”
* The CodePen sandbox allows you to experiment with

HTML code and stand-alone CSS side-by-side. Make
sure to save your work!
3 Ways to Use CSS
* Inline: by using the style attribute within

individual HTML elements
* Internal: by using a <style> element in the

<head> section of your document
* External: by using an external .css file

Inline CSS
* Inline:
<h1 style="color:blue;">This is a blue heading.</h1>
(property) (value)
(style attribute within the opening tag of an element)

Internal CSS
<!DOCTYPE html> (selector) (declaration block = “property: value;”)

<html>
<head>
<style>
body {background-color: lightblue;}
h1 {color: white; font-size:20px;}
p {color: black;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
* Recommended method: allows you to change the

appearance of an entire web site by changing a single file.
Include the following in the head section of your HTML
document:
<head>
<link rel="stylesheet" href="styles.css">
</head>
* Demo: https://www.w3schools.com/css/css_intro.asp
Example styles.css
(selector) (declaration block)
body {
background-color: lightblue;
}
h1 {
color: white;
font-size: 20px;
}
p{
color: black;
}
Types of CSS Selectors
* 1. The element selector.

* Selects elements based on the element name – here
all <p> elements will be center-aligned and red:
HTML
<p>This is a paragraph.</p>
p {text-align: center; color: red;}

CSS
* 2. The id selector. Syntax = hash (#) + unique id

* Selects elements based on a unique element id – here
only the text in the element with the id “paragraph2”
will be center-aligned and red:
HTML
<p id=“paragraph2”>This is a paragraph.</p>
#paragraph2 {text-align: center; color: red;}

CSS
* 3. The class selector. Syntax = period (.) + name of class

* Selects elements based on their class – here all text with
the assigned class “city” will be center-aligned and red
(regardless of what element type it is):
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
HTML
<h2>Paris</h2>
<p class="city">Paris is the capital of France.</p>
.city {text-align: center; color: red;}

CSS
* 3b. The class selector can specify that only certain HTML
elements should be affected by a class style. Here only
paragraphs of class “city” will be affected.
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
HTML
<h2>Paris</h2>
<p class="city">Paris is the capital of France.</p>
p.city {text-align: center; color: red;}

CSS
Final Task
* Task: Copy the HTML table you created earlier into

CodePen. Using CSS, can you replicate the table below?
* Hints: You can create classes for each style of cell. You can
specify the text color with the “color” property and the
cell color with the “background-color” property.
Additional Resources
* HTML: https://www.w3schools.com/Html/
* CSS: https://www.w3schools.com/css/default.asp

Intro To HTML CSS

Uploaded by

Intro To HTML CSS

Uploaded by

Intro to HTML / CSS

* HTML = Hyper Text Markup Language

* “HyperText” uses hyperlinks: these allow you

* Linear reading (novels) vs. non-linear reading

* Your web browser interprets HTML

* Markup allows you to include metadata (data

* Markup documents use tags to define

* In HTML documents, opening and closing tags

* Tags for document definition and organization.

* Tags for text formatting and headings.

* TASK: Add a heading (H1) to the body of your document. Then

* Two important tags that require attributes:

* <img> -- inserts an image; does not have a closing tag!

* TASK: Add a new paragraph to the body of your document. To

* Both hyperlink and image tags can be expanded with

<table align=“center” border=“1” cellpadding=“0”>

Required table elements:

* CSS = Cascading Style Sheets

* While HTML describes what elements to render on a

* For an interactive HTML/CSS sandbox, go to

* The CodePen sandbox allows you to experiment with

* Inline: by using the style attribute within

* Internal: by using a <style> element in the

* External: by using an external .css file

<h1 style="color:blue;">This is a blue heading.</h1>

(style attribute within the opening tag of an element)

<!DOCTYPE html> (selector) (declaration block = “property: value;”)

* Recommended method: allows you to change the

(selector) (declaration block)

* 1. The element selector.

p {text-align: center; color: red;}

* 2. The id selector. Syntax = hash (#) + unique id

<p id=“paragraph2”>This is a paragraph.</p>

#paragraph2 {text-align: center; color: red;}

* 3. The class selector. Syntax = period (.) + name of class

.city {text-align: center; color: red;}

p.city {text-align: center; color: red;}

* Task: Copy the HTML table you created earlier into

You might also like