Women in ITM Workshop: Intro to HTML and CSS

INTRO TO HTML/CSS
By Shanta R. Nathwani, B.Com., MCP
for Women In Technology Management

WELCOME
• Introductions and Backgrounds
• HTML
• CSS
• Layouts
• Links, Images and Video
We will take about 15 minutes between each lesson to work on the content
and a break half way through.

ABOUT ME
• Graduate of Ryerson’s ITM program
(Co-op and Exchange) 2009
• Currently an Instructor in Web
Design at Sheridan College in the
joint CCIT program with UTM
• Alumni Advisor for Women in ITM
• Founder, Women in Information
Technology Hamilton (WITHamOnt)
• Applying for Masters in Educational
Technologies at UBC

ABOUT DIMITAR
• Will be graduating from the ICCIT
program at UTM in June, including
his certificate from Sheridan College
• Soon-to-be co-instructor of the
Beginner and Intermediate Web
Design Courses at Sheridan College
in the CCIT program
• Independent Web Developer

OTHER (BETTER) GREAT ITM CODERS

DON’T LET YOUR HEAD EXPLODE!

CONCEPTS OF HTML
CCT260H - Shanta R. Nathwani
8
HTML controls:
• Layout
• Image Placement
• Links

HTML BASICS
9

HTML BASICS
• Elements are used to describe text
• An element is comprised of:
• An opening tag
• A closing tag
• Content
• Tags are denoted by the greater and less than signs < >
<strong> The text will appear bold </strong>
10
Closing TagOpening Tag Content
Element

HTML BASICS
• Elements – like brackets – must be opened and closed
• “Container Codes”
• A closing tag is created by using the / character
<body>  opening tag closing tag  </body>
• Some elements may not have content:
• <br/>  Self-closing element (one-tag, no content)
11

HTML BASICS
• HTML is case-sensitive (XHTML)
• Use lowercase only! <body> not <Body>
• Spelling is important
• <body> </bodi>  element will not be closed
• Embed tags correctly
Incorrect:
<h1> HTML <strong> is </h1> easy </strong>
Correct:
<h1> HTML <strong> is easy </strong> </h1>
12

HTML BASICS
13
• White space does
nothing
• Exception: Single space
after a word
• Enter, tabs are ignored
• Use elements and styles
to perform layout
• Use white space to
visually layout your
code, not your layout
Will look like this

HTML BASICS
14
• Use spacing to clearly
separate elements
• Use indentation (tabs) to show
hierarchy
• Add comments to separate
areas or provide notes to
future programmers
 ends a comment
• Remember that comments
are visible to the end-user,
don’t insult your boss or
swear!

TEXT ELEMENTS
• <p> starts a paragraph ¶
• <br/> causes a new line ¬ - should be rarely used
• <strong> bolds text
• <em> italicize text
• <sub> & <sup> create subscript and superscript text
• <ins> & <del> underlines and strikes-out text
15

LAYOUT ELEMENTS
• <html> starts your page
• <head> classifies your page
• <body> contains your visible page
• <div> starts a new block or section of the page
• <span> is a generic wrap for a line of text
• Used for more complex text styles
• <h1> … <h6> creates heading and subheadings
16

THINKING IN HTML
17
Look for divisions
(or sections) of text
• Paragraphs
• Headings
• Images
• Font or Style Changes
• Boxed- or sub-text

HTML BASICS
Why do we hand-code?
• To better understand the language
• Remember grammar in French class?
• Aides in understanding output from Dreamweaver
• To troubleshoot pages we did not create
• To steal other people’s code!
• Don’t ever do that for an assignment! >:@
18

LAB ONE
• Open Your Text Editor and type the following code:
19
<!DOCTYPE html>
<html>
<head>
<title>
Love HTML!
</title>
</head>
<body>
<h1>

</h1>
<p>

</p>
<footer>
<!– Put your name and the date here -->
</footer>
</body>
</html>

INSTRUCTIONS
Open your lab in the text editor, replacing the comment lines  with
your own essay pieces
For example:
This:
<footer>
<!– Put your name and the date here -->
</footer>
Becomes This:
<footer>
Shanta R. Nathwani, January 17, 2014
</footer>
20

SAVING IN HTML
1. Select “Save As…" to change the extension to .html. Expand the “Save As…" dialog to see
the additional options and then manually change the file’s extension to .html.
2. Save the document with the following format:
filename.html
• For example: lab1.html
Remember to save your document in a place that you can find it again. One way to do this is
to create a folder called yourlastname_firstwebpage on your desktop or in your roaming hard
drive.
21

CLARIFICATIONS & REVIEW
• Only the heading tags (such as <h1> ) need to be numbered
• Paragraph tags don’t need to be numbered. Just use <p>. Using this tag will
automatically format a paragraph, such as spacing.
• The <head> tag is used before the “visible” part of the html page, <body>.
This is different than <header>, which is a title within the <body> tag.
CCT260 - Shanta R. Nathwani
23

CLARIFICATIONS (PART 2)
24
<html>
<head>
<title>
This is visible on the tab on your browser
</title>
</head>
<body>
<h1>
This is a 1st level header visible in the body part of the
web page
</h1>
<p>
This is a paragraph visible in the body part of the web page
</p>
</body>
</html>

ATTRIBUTES
• Tags can contain attributes
• Attributes provide contextual information, just as giving it a style or unique
identifiers
• Always apply them to the first tag
• Attributes also allow for JavaScript actions
<div id=“section-first” class=“section”> </div>
26

ATTRIBUTES
• id must be unique throughout the page
• class associates or groups tags together
<div id=“section-one”>
<div class=“title”> Title of Section One </div>
<p>
This is <span class=“highlight”>section
one</span>. Next will be <span
class=“highlight”>section two</span>
</p>
</div>
27

QUICK POINT
• If you are copying code from the PowerPoint slide, make sure you change the
quotes!
“ stylised ” Improper
" ASCII-proper " Proper
• PowerPoint automatically uses stylised quotes, which is not recognised by browsers
28

STYLES AND HTML
• HTML originally was never meant to depict style
• It was created to provide semantic value to text
• Tells us “What is this?”
• i.e., Paragraph, Heading, List, List Item
• Hence the argument over <b> and <strong> tags rendering differently
• Before the existence of CSS, HTML was used “in-line” to change the
appearance. – DON’T DO THIS ANYMORE! (unless it’s a short piece of text)
29

STYLES AND CSS
• Cascading Style Sheets (CSS) was created to resolve this missing piece
• And stop the abuse of HTML to conduct formatting
• Tells us “What does it look like?”
• i.e., Size, shape, text, colour… and much more!
• CSS matches what is contained in the HTML code
• <div> in HTML is div in CSS
• For our purposes of this lab, CSS is to be placed in the <head> area of your
code.
30

STYLES - LEVELS
• Styles can be applied at five levels
• Element Level (HTML)
• <h1>
• Class Level
• .section
• Element/Class (Instance) Level
• ul.b
• ID Level
• #content
• In-Line Level
• Rarely used and considered poor form
• Few exceptions
31

ELEMENT STYLES
32
<html>
<head>
<style type="text/css">
body
{
background-color: orange;
}
</style>
</head>
<body> …
Style you are defining
Start of definition
End of definition
Property Value

<body>
The background is orange
<p>
bold text
<span class="red">that is red</span>
</p>
back to normal
</body>
CASCADING STYLES
33
• Styles are in inherited from parent elements
body
{
background-color: orange;
}
p
{
font-weight: bold;
}
.red
{
color: red;
}
</style>
Class definition will change all
elements with the same class name

COLOURS
• Colours can be defined by name or value
red = rgb(255,0,0) = #FF0000
• color property will set the text
• background-color property will set the background
• Colours are important:
• Sets mood and possesses semantic meaning
http://kuler.adobe.com/#create/fromacolor
http://www.2createawebsite.com/build/hex-colors.html
34

FONT FAMILY
• There are only a dozen fonts uniform across browsers and systems
• Set the style of font by using the font-family property:
body
{
font-family: “Times New Roman”, “Times”, “serif”;
}
• Remember to have dropdown fonts
http://www.w3schools.com/cssref/css_websafe_fonts.asp
35

FONT SIZE
36
• Explicitly by using “em”s,
“pt”s or “px”s
• Implicitly using percentiles:
100%, 60% etc.
• Ems are relational to the font
• px are screen sizes, but
doesn’t work in older
browsers dealing with
accessibility
• I suggest using em:
font-size: 1.2em;

TEXT LAYOUT
• In the CSS
• text-align: [left|center|right|justify]
• text-decoration: [underline|line-through]
• text-indent: 50px
37

LAB TWO
Using the same file…
• Proper format the paragraphs (indentation and justified)
• Centre Titles
• Change the overall font and size
• Use a span to change in-line citation style
• Select a comfortable colour palette
All using CSS!
38

PLAY
• Online editor
http://www.w3schools.com/Css/tryit.asp?filename=trycss_default
• CCS reference
http://www.w3schools.com/cssref/default.asp
39

VIEWING YOUR HTML
• To preview your new document, open Chrome on the tool bar
(located up near the top of the browser):
• Select File menu.
Select Open Page
A dialogue box appears. Select Choose File
• Go to where you saved your file, click on it. This will bring you back to
the dialogue box, which should now be showing your file.
• Click Open
40

PLAYING WITH HTML
The best way to learn HTML:
• Play!
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
• Explore!
http://www.codecademy.com/tracks/web
41

LAST POINTS
• Please remember to “Save As…” an .html file
• When copying the code, quotations won’t necessarily work. Documents will
change quotation marks to curly quotes. Code needs straight quotes, so
please remove and replace the quotations when copying from PowerPoint
or Word.
• Don’t cross the streams! Make sure that your codes go together.
• For those using Windows, you can use Notepad++ as a text editor.
SublimeText 2 is another great one, but is a paid program
42

PLANNING YOUR SITE
• Think about what
divisions you will need
• Start with the highest
level: the body
• Then divide up your
page
• Starting with the
biggest divisions, down
to the smallest
46
Title
Menu
Main Area
Content
Footer

CODING YOUR SITE
<body>
<div id=“title”>
</div>
<div id=“menu”>
</div>
<div id=“mainarea”>
<div id=“content”>
</div>
<div id=“footer”>
</div>
</div>
47
Title
Menu
Main Area
Content
Footer
Note that ‘id’ or ‘class’ values cannot
contain spaces

PREPARING YOUR STYLE
<head>
div {
border: solid 1px;
}
#title
{
}
#menu
{
}
48
#mainarea
{
}
#content
{
}
#footer
{
}
</style>
</head>
Adds a simple thin black border
around each division
This is just for clarity while editing
and we will remove this after we’re
done
Notice that instead of
using a period (.) we
use the hash symbol
(#) to reference the id
name of an element

PREPARING YOUR STYLE
49
Doesn’t look like much… does it?

POSITIONING YOUR DIVISIONS
• By default, <div>s take up the entire width of this page and resize the
length to fit your content
• You can force the size your <div> using pixels or ratios
e.g. height: 100px;
width: 50%;
• And, you can tell a division stay on one side
e.g. float: left;
float: right;
50

FORMATTING YOUR DIVISIONS
51
• You can space your <div>s
by adding margins
margin: 5px;
margin-top: 10px;
• Or padding
padding: 5px;
padding-left: 20px;
• Or borders
border: solid 5px
green;

FORMATTING YOUR DIVISIONS
<head>
div
{
border: solid 1px;
margin: 5px;
padding: 5px;
}
#title
{
height: 50px;
}
#menu
{
width: 150px;
float: left;
height: 400px;
}
52
#mainarea
{
margin-left: 180px;
margin-top: 10px;
}
#content
{
}
#footer
{
height: 30px;
text-align: right;
}
</style>
</head>

FORMATTED DIVISIONS
53

COMPLETING DIVISIONS
54
• Now that it is laid out,
you can:
• Remove the borders
• Or add other borders
for visual separation
• Use the styles from last
lab (font-size, font-
family, font-weight,
color, background-color)
to format and style the
content
border-bottom: double 5px gray;
background-color: #DDDDDD;
font-size: 2em;
border-right: solid 2px
gray;
background-color:
#eeeeee;
text-align:center;
font-family: "Palatino
Linotype",
"Book Antiqua", Palatino,
serif;
text-align: right;
font-size: 0.8em;
color:#AAAAAA;

FILLING YOUR DIVISIONS
55

LAB THREE
• Create a new page (see Lab One)
• Create a layout for your page
• Give it some style (colours, borders, spacing)
• Copy the content of your last lab into your new page (everything between
the <body> and </body> tags)
56

CHOOSING A LAYOUT
• Sample layouts: http://foundation.zurb.com/templates.php
• Play with divisions:
http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width_doctype
• Play with borders:
http://www.w3schools.com/css/css_border.asp
57

LINKS, IMAGES AND VIDEO
The cool stuff!

OTHER THINGS TO REMEMBER
• Your head is always atop your body
• If it is otherwise, congrats, your more flexible than I am
• The only stupid question is one unasked
• Please post to the discussion group if you are having issues.
• Everything is in American spelling
• Sorry…
60

IMAGES
61
• Adding an image is easy!
• <img src=“K9.jpg”/>
• Sometimes files can be located in
a sub-folder of a website
• <img src=“Images/K9.jpg”/>
• Or on other sites
• <img
src=“http://shanta.ca/Images/K
9.jpg”/>

THE ALT AND TITLE TAGS
62
• The alt tag provides
textual context if the
image is missing
• The title tag provides a
tooltip for the user when
they place their cursor
over it
• <img src="K9.jpg" alt="K9
of Doctor Who" title="K9
of Doctor Who" />

THE ALT AND TITLE TAGS
63
• Don’t use the alt tag as
a tooltip (works only in
IE)
• Always use alt tags for
all important images
• This is used for
accessibility by people
with impaired vision
• And it is a requirement!

FLOATING IMAGES
64
• You can position images
using the float style
<img src="graph.jpg"
alt="Graph"
style="float:left;"/>
<img src="graph.jpg"
alt="Graph"
style="float:right;"/>
This is called an in-line style.
Use this for specific tags (like
image) and for extremely
individual changes.
Image is one of the only
exceptions that we will allow
for in-line style in the HTML.

RESIZING IMAGES
65
• You can change the
size of the image using
the width and height
tags
<img src=“K9.jpg" alt=“K9"/>
<img src="mertz.jpg"
alt="Mertz" width="40"/>
<img src="mertz.jpg"
alt="Mertz" width="100"
height="200"/> Normal
Small
Stretched

BACKGROUNDS
66
• Background for an
entire page
body
{
background: url(floral.jpg);
}
</style>

BACKGROUNDS
67
• Or any other section of the
page
#box
{
float: left;
width: 480px;
padding: 50px;
background: url(background.jpg);
text-align: center;
}
<div id="box">
<h2>II. Economic Liabilities - Peak
Oil</h2>
<img src="graph.jpg" alt="graph"
width="300" />
</div>

OPACITY
68
• You can set the
opacity of items on
you page as well
#box
{
…
filter:
alpha(opacity=60);
/* CSS3 standard */
opacity: 0.6;
}

TRANSFORMATION -- PLAY!
• http://www.w3schools.com/cssref/css3_pr_transform
.asp
• http://www.w3schools.com/cssref/tryit.asp?filename
=trycss3_image_gallery
69

LINKS
• Links can be to internal, external site or jump to a section on your
page via an anchor
• We create a link by wrapping text or an image with the <a> tag
<a href="http://www.w3schools.com/">Visit W3Schools!</a>  external
link
<a href=“mypage2.html">Page Two</a>  internal
70

ANCHORS
• We can create anchors by creating an empty <a> tag and providing it
with an identifier
<a id="name"/>
• And link to it using the identifier with a # symbol
<a href="#name">Jump to Anchor called name</a>
71

LINKS
• From one page to another on your own site:
• On index page: <a href=“labone.html”>Lab One</a>
• On Lab One: <a href=“index.html”>Home Page</a>
• From one page to another external page:
• On your page to Google: <a href=“http://google.ca”>Google It!</a>
72

LINK STYLES
• Links have four states
a:link { color:#ff0000; } /* unvisited link */
a:visited { color:#00ff00; } /* visited link */
a:hover { color:#ff00ff; } /* mouse over link */
a:active { color:#0000ff; } /* selected link */
http://www.w3schools.com/css/tryit.asp?filename=trycss_link
73

VIDEO
<iframe width="420" height="315"
src="http://www.youtube.com/embed/Sqiff0WFWvs" frameborder="0"
allowfullscreen>
</iframe>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>
74
There are two methods of placing video on a website using
the <iframe> and <video> tags.

LAB FOUR
• Add images within the text of your last assignment (not background)
• Add either a background image to the entire page or a div within the page
• Add a link to the Sheridan website
• Add anchors for each subheading and place links to them in your menu
• Put this lab on your webspace, then submit the link in a text file to the
dropbox.
• FOR THIS LAB, USE ONLY EXTERNAL IMAGES (i.e. reference an image
somewhere on the web where anyone can see it)
75

FINAL NOTES
A Few Things We Couldn’t Fit In…

EXTERNAL CSS FILES
• Today, we’ve only put the CSS in the <head> portion of your .html file.
Typically, you would have an additional file
• Extension is .CSS
Insert the following line of code into the head of each of your HTML files:
<link rel="stylesheet" type="text/css" href="mystyle.css">*
*This assumes that the file is called “mystyle.css

EDITING AND UPLOADING
• I recommend you get some webspace somewhere to make this stuff live on
the internet
• Get an FTP program that you like using
• We typically use Cyberduck
• Get a good Code Editor
• We use Notepad++ on Windows, TextWrangler. Both are free.
• I personally recommend SublimeText

RESOURCES
• CodeCademy: http://codecademy.com
• Lynda: http://lynda.com
• W3Schools: http://www.w3schools.com/
• My Bluehost Affiliate Link: http://www.bluehost.com/track/shanta/aboutme

FINDING ME
Shanta R. Nathwani, B.Com., MCP
Instructor, Sheridan College
Email: shanta@shanta.ca
Website: http://shanta.ca
Twitter: @TantienHime

THANK YOU!
Now, go forth and be wonderful! – Professor Kathleen Greenaway, Ph.D.

Women in ITM Workshop: Intro to HTML and CSS

More Related Content

Viewers also liked (20)

Similar to Women in ITM Workshop: Intro to HTML and CSS (20)

More from Shanta Nathwani (20)

Recently uploaded (20)

Women in ITM Workshop: Intro to HTML and CSS