An Introduction to HTML & CSS
What is HTML
A Brief History...
HTML Tag Syntax
HTML is represented in tags. A tag is a set of <> with a specific element in them. The element name is responsible for rendering the contents of the tag in the browser. Most tags come in pairs with an opening<element> and a closing </element>.
Sometimes, we can alter the element intent using an attribute. Attributes are written in the opening tag with an attribute name and value, separated by an equals (=) sign. The value should be in single quotes.
<a href=’page.html’>Click Me</a>
opening tag
closing tag
attribute
name
value
content
Basic Structure of a Web Page
<!DOCTYPE html>�<html>� <head>� <title>My Page</title>� </head>� <body>� Welcome to my web page!!� </body>�</html>
Basic Structure of a Web Page
<!DOCTYPE html>�<html>� <head>� <title>My Page</title>� </head>� <body>� Welcome to my web page!!� </body>�</html>
<!DOCTYPE html>�
The Document Declaration that tells the browser what type of information to expect. This will be the first line of every web pages HTML.
Basic Structure of a Web Page
<!DOCTYPE html>�<html>� <head>� <title>My Page</title>� </head>� <body>� Welcome to my web page!!� </body>�</html>
<html> … </html>�
The html tag is the root tag of the document. ALL other code must go inside the html element.
Basic Structure of a Web Page
<!DOCTYPE html>�<html>� <head>� <title>My Page</title>� </head>� <body>� Welcome to my web page!!� </body>�</html>
<head>...</head>�
One of the two direct descendants of the html element. Only special tags that describe the document go in this section. NOT A PLACE FOR VISIBLE CONTENT.
Basic Structure of a Web Page
<!DOCTYPE html>�<html>� <head>� <title>My Page</title>� </head>� <body>� Welcome to my web page!!� </body>�</html>
<title> … </title>�
Gives the page a title for reference. This title does not appear on the page. Instead, it appears in the browser tab to identify the page. This is currently the ONLY code that should go in the <head> element.
Basic Structure of a Web Page
<!DOCTYPE html>�<html>� <head>� <title>My Page</title>� </head>� <body>� Welcome to my web page!!� </body>�</html>
<body> … </body>�
The only other direct descendant of the html element. ALL visible content for the page should appear in this element.
Whitespace
HTML ignores whitespace (tab, spaces, returns) except for a single space character. So, to create a line break, we need to use the <br/> tag. The <br/> tag is a singleton tag - in other words it has no closing partner.
<body>� Welcome to my web page!!� <br/>� This is the second line.�</body>�
Heading Tags
Heading elements, <h1>...<h6>, are used to create headings on pages. They automatically bold information AND provide a built in line break both before and after the element.
<body>� <h1>� Welcome to my web page!!� </h1>� <br/>� This is the second line.�</body>�
What is CSS
CSS Rule Syntax
CSS is represented by rules. A rule is a style name paired with a style value. The type and value are separated by a colon (:).
Sometimes, we apply several rules to the same element. In this case, each name:value rule is separated from the others using a semicolon (;). Using this syntax, you can apply as many rules as desired to an element.
color: blue; text-align:center
rule
name
value
rule
name
value
Colors
CSS can be used to change the foreground (text) color of an element and the background color of an element.
The values of these colors can be either a reserved name color or a hex color. Hex color values must begin with a # character.
Reserved Colors
Color Picker
Inline Styles
Inline styles are applied to an element through the use of the style attribute. The value of the attribute, the name:value pairs, should be enclosed in a set of single quotes.
<body style=’background-color:blue; color:red’>� <h1 style=’color:white’>� Welcome to my web page!!� </h1>� <br/>� This is the second line.�</body>�
Getting Started in HTML/CSS
Make a page with your name in an h2 with white text on black background. Then, on a new line, write your address in red and your phone number in blue (use an h3 or h4).
Mickey Engel
201 E. Germantown Pike
Plymouth Meeting, PA 19462
610-825-1500
Getting Started in HTML/CSS
Review
HTML Tags
CSS Styles
Web Notes
Lecture Code
Formatting Text with HTML&CSS
The <div> Tag (Block)
A block level element is an element that is the full width of the page and has a pre and post line break built into it. The <div> tag is a block level element with no other pre-formatting (unlike h1 that bold and enlarges text). A <div> can be used to create paragraph level separations on a page.
<div>
This is the first paragraph.
</div>
<div>
This is the second paragraph.
</div>
The <span> Tag (Inline)
An inline element is only the width of its content and does NOT have line breaks before OR after. The <span> tag is an inline element and allows designers to designate pieces of code for styling without forcing a line break.
<span>
This is first.
</span>
<span>
This is second.
</span>
<div> vs. <span>
<div> and <span> in Use
<div style='background-color:red'>� This is the first sentence.� <span style='color:white'>� This is the second sentence.� </span>� This is the third sentence�</div>�<div style='background-color:#AAAAFF'>� Sentence A.� <span style='color:yellow'>� Sentence B.� </span>�</div>
CSS Text Formatting
Style Name | Value Options |
font-weight | normal | bold |
font-style | normal | italic |
text-decoration | none | underline | overline | line-through |
font-size | measured in em |
font-family | comma separated list of fonts |
text-align | right | center | left |
CSS Text Formatting in Action
<div style=’text-align:right’>� <span style=’font-weight:bold’>� Bold� </span>� <span style=’font-style:italic’>� Italic� </span>� <span style=’text-decoration:underline’>� Underline� </span>�</div>
Font Sizing
Font sizes can be set in pixels (px) or points (pt). These are absolute measures and will be the same size regardless of the device or user settings. A better option is to use em. em’s are a relative measure that are based on the user/devices default font size. So, 1em is default size, .5em is half the default size and 2em would be twice the default size. It is recommended to use em for font sizing to keep your design as desired on different devices.
Font-Family
Font families are the face of the font (Verdana, Times, Arial, …). One problem we run into as web designers is that browsers can only use the fonts on their computer. So, if we specify the font Lato - the site will look great on our computer, but we are unsure of how it will look on other computers. So, HTML/CSS allow us to list a set of fonts to use, in priority order. Typically, we list three: the desired font, a common substitute and a generic option (serif / sans-serif).
Web Safe Fonts
Serif v. Sans-serif
Google Fonts
A way to ensure that users experience your page the way you want, is to use Google Fonts. By incorporating Google Fonts into your code, you can use any of the 800+ fonts from their collection and browsers connected to the internet will be able to access those fonts - providing a consistent user experience for all, regardless of platform, browser or device.
Google Fonts
Practice
Make a page with your name( First M. Last), centered and bold at the top. Your name should be white text on a purple background (not the whole page). Then, make your first name in the font Arial, the middle initial in the font Times New Roman and your last name in the Google font Raleway.
Michael G. Engel l
Practice Solution
Review
HTML Tags
CSS Styles
Web Notes
Lecture Code
Images in HTML&CSS
On your own…
Use the Internet to learn about how to put images on a web page. Be sure to research the following items:
To learn this concept, you will need to research and experiment with different pieces of code.
When you are finished, create a google doc with a narrative (containing code examples) of how to use images in web pages. Share that doc with mengel@staff.colonialsd.org.
Images
Images are added to a web page using the <img> tag. The <img> tag is a singleton and has a required attribute, src. The src attribute points to the name/location of the image to be shown. This file can be on the internet (need http://) or stored locally with the .html file. There is an optional attribute, alt, that can be used to describe the picture, in case the image load fails, or for users with screen readers.
CSS Image Formatting
Style Name | Value Options |
width | set in px or %, setting only width will change height proportionally |
height | set in px or %, setting only height will change width proportionally |
border | format is px style color, where style options include solid, single, double, dotted, dashed, inset, outset, ridge groove and color can be reserved color or hex. |
border-radius | rounds the corners of an image. Can be set in px or %. If set high enough, will convert image to a circle. |
More Info...
<img src=’pic.png’ style=’width:50px; height:50px; border:4px solid #FFFFAA; border-radius:10px’ alt=’a styled pic’ />
Images and Text
HTML will align text to start at the bottom of an image and continue after, leaving a significant amount of whitespace. To fix this, we can take an image and “float” it to the left or right, causing the text to wrap around it. The trick is that the image, regardless of position, must appear before the text in the code.
no float
float:left
float: left | right
Background Images
We can use CSS to make an image the background of the page or any block level element. This is done using the background properties. There are several settings we can use:
More Info...
Background Images in Action
<body style='� background-image:url("coding.jpg"); � background-position:center center; � background-size:cover; � background-repeat:no-repeat'>
<h1 style='color:white'>� PROGRAMMING� </h1>�</body>
Practice
Download a copy of Dali’s Persistence of Memory. Place a frame around it that is inset, 6 pixels and blue. Then, float the image to the right and add the text.
The Persistence of Memory is a Salvador Dali work. This
Spanish painter is one of the most controversial artists of
the twentieth century. Dali is known to be a famous
Surrealist and most of his works show a sort of dream
sequence. The Persistence of Memory hangs in the
Museum of Modern Art in New York City.
Review
HTML Tags
CSS Styles
Web Notes
Lecture Code
HTML 5
Symantic Elements
Prior to HTML 5 (2014)
<div>� <img src=’logo.png’ style=’height:60px; float:left’ />� <div>About | Clients | Contact | SignIn</div>�</div>�<div>� <div>� <div style=’float:right; height:200px; width:100px; border:1px solid black’>� This is some content for the right side of the page� </div>� This is the content for the first section of the page.� </div>� <div style=’clear:both’>� This is content for the second section of the page.� </div>�</div>�<div style=’height:50px; text-align:center’>� © 2020 - ThisCorporation.com�</div>
The <header> Element
<header>� <img src=’logo.png’ style=’height:60px; float:left’ />� <div>About | Clients | Contact | SignIn</div>�</header>�<div>� <div>� <div style=’float:right; height:200px; width:100px; border:1px solid black’>� This is some content for the right side of the page� </div>� This is the content for the first section of the page.� </div>� <div style=’clear:both’>� This is content for the second section of the page.� </div>�</div>�<div style=’height:50px; text-align:center’>� © 2020 - ThisCorporation.com�</div>
The <nav> Element
<header>� <img src=’logo.png’ style=’height:60px; float:left’ />� <nav>About | Clients | Contact | SignIn</nav>�</header>�<div>� <div>� <div style=’float:right; height:200px; width:100px; border:1px solid black’>� This is some content for the right side of the page� </div>� This is the content for the first section of the page.� </div>� <div style=’clear:both’>� This is content for the second section of the page.� </div>�</div>�<div style=’height:50px; text-align:center’>� © 2020 - ThisCorporation.com�</div>
The <section> Element
<header>� <img src=’logo.png’ style=’height:60px; float:left’ />� <nav>About | Clients | Contact | SignIn</nav>�</header>�<div>� <section>� <div style=’float:right; height:200px; width:100px; border:1px solid black’>� This is some content for the right side of the page� </div>� This is the content for the first section of the page.� </section>� <section style=’clear:both’>� This is content for the second section of the page.� </section>�</div>�<div style=’height:50px; text-align:center’>� © 2020 - ThisCorporation.com�</div>
The <aside> Element
<header>� <img src=’logo.png’ style=’height:60px; float:left’ />� <nav>About | Clients | Contact | SignIn</nav>�</header>�<div>� <section>� <aside style=’float:right; height:200px; width:100px; border:1px solid black’>� This is some content for the right side of the page� </aside>� This is the content for the first section of the page.� </section>� <section style=’clear:both’>� This is content for the second section of the page.� </section>�</div>�<div style=’height:50px; text-align:center’>� © 2020 - ThisCorporation.com�</div>
The <footer> Element
<header>� <img src=’logo.png’ style=’height:60px; float:left’ />� <nav>About | Clients | Contact | SignIn</nav>�</header>�<div>� <section>� <aside style=’float:right; height:200px; width:100px; border:1px solid black’>� This is some content for the right side of the page� </aside>� This is the content for the first section of the page.� </section>� <section style=’clear:both’>� This is content for the second section of the page.� </section>�</div>�<footer style=’height:50px; text-align:center’>� © 2020 - ThisCorporation.com�</footer>
Side by Side
<header>� <img src=’logo.png’ style=’height:60px; float:left’ />� <nav>About | Clients | Contact | SignIn</nav>�</header>�<div>� <section>� <aside style=’float:right; height:200px; width:100px; � border:1px solid black’>� This is some content for the right side of the page� </aside>� This is the content for the first section of the page.� </section>� <section style=’clear:both’>� This is content for the second section of the page.� </section>�</div>�<footer style=’height:50px; text-align:center’>� © 2020 - ThisCorporation.com�</footer>
<div>� <img src=’logo.png’ style=’height:60px; float:left’ />� <div>About | Clients | Contact | SignIn</div>�</div>�<div>� <div>� <div style=’float:right; height:200px; width:100px; � border:1px solid black’>� This is some content for the right side of the page� </div>� This is the content for the first section of the page.� </div>� <div style=’clear:both’>� This is content for the second section of the page.� </div>�</div>�<div style=’height:50px; text-align:center’>� © 2020 - ThisCorporation.com�</div>
Margins and Padding
CONTENT
ELEMENT
PADDING
PADDING
PADD
I
NG
PADD
I
NG
MARGIN
MARGIN
MARG
I
N
MARG
I
N
Margins and Padding - CSS
all rules work the same for padding, e.g.: padding: 5px 10px;
Margins and Padding - Examples
Controlling Layout with CSS Display
The display style allows users to alter the type of element between block and inline. Block level elements, as discussed, are full width with a line break before and after. Inline elements are the width of their content with no breaks. Unfortunately, things like margins and padding can only be applied to block level elements. In the cases where we want an element to act inline, but be able to access block level styles, we change the CSS display property.
display: block | inline | inline-block
Practice
In a page, create two paragraphs of text and place them in a section (use the text generator tool). Then, in that section, create an aside, that will float on the right of the screen. The aside should have some text in it AND should have bottom and left margins of 10px with 5px padding on all sides. The background color of the aside should be yellow with a 3px black solid border.
Review
HTML Tags
CSS Styles
Web Notes
Lecture Code