New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Women in ITM Workshop: Intro to HTML and CSS
1. INTRO TO HTML/CSS
By Shanta R. Nathwani, B.Com., MCP
for Women In Technology Management
2. 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.
3. 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
4. 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
10. 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>
CCT260H - Shanta R. Nathwani
10
Closing TagOpening Tag Content
Element
11. 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)
CCT260H - Shanta R. Nathwani
11
12. 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>
CCT260H - Shanta R. Nathwani
12
13. HTML BASICS
CCT260H - Shanta R. Nathwani
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
14. HTML BASICS
CCT260H - Shanta R. Nathwani
14
• Use spacing to clearly
separate elements
• Use indentation (tabs) to show
hierarchy
• Add comments to separate
areas or provide notes to
future programmers
<!-- starts a comment
--> ends a comment
• Remember that comments
are visible to the end-user,
don’t insult your boss or
swear!
15. 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
CCT260H - Shanta R. Nathwani
15
16. 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
CCT260H - Shanta R. Nathwani
16
17. THINKING IN HTML
CCT260H - Shanta R. Nathwani
17
Look for divisions
(or sections) of text
• Paragraphs
• Headings
• Images
• Font or Style Changes
• Boxed- or sub-text
18. 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! >:@
CCT260H - Shanta R. Nathwani
18
19. LAB ONE
• Open Your Text Editor and type the following code:
CCT260H - Shanta R. Nathwani
19
<!DOCTYPE html>
<html>
<head>
<title>
Love HTML!
</title>
</head>
<body>
<h1>
<!-- Copy your title here -->
</h1>
<p>
<!-- Copy your assignment here. Each paragraph should be
contained within another <p> -->
</p>
<footer>
<!– Put your name and the date here -->
</footer>
</body>
</html>
20. INSTRUCTIONS
Open your lab in the text editor, replacing the comment lines <!-- X --> 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>
CCT260H - Shanta R. Nathwani
20
21. 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.
CCT260H - Shanta R. Nathwani
21
23. 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
24. CLARIFICATIONS (PART 2)
CCT260 - Shanta R. Nathwani
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>
26. 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>
CCT260 - Shanta R. Nathwani
26
27. 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>
CCT260 - Shanta R. Nathwani
27
28. 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
CCT260 - Shanta R. Nathwani
28
29. 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)
CCT260 - Shanta R. Nathwani
29
30. 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.
CCT260 - Shanta R. Nathwani
30
31. 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
CCT260 - Shanta R. Nathwani
31
32. ELEMENT STYLES
CCT260 - Shanta R. Nathwani
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
33. <body>
The background is orange
<p>
bold text
<span class="red">that is red</span>
</p>
back to normal
</body>
CASCADING STYLES
CCT260 - Shanta R. Nathwani
33
• Styles are in inherited from parent elements
<style type="text/css">
body
{
background-color: orange;
}
p
{
font-weight: bold;
}
.red
{
color: red;
}
</style>
Class definition will change all
elements with the same class name
34. 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
CCT260 - Shanta R. Nathwani
34
35. 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
CCT260 - Shanta R. Nathwani
35
36. FONT SIZE
CCT260 - Shanta R. Nathwani
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;
37. TEXT LAYOUT
• In the CSS
• text-align: [left|center|right|justify]
• text-decoration: [underline|line-through]
• text-indent: 50px
CCT260 - Shanta R. Nathwani
37
38. 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!
CCT260 - Shanta R. Nathwani
38
40. 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
CCT260H - Shanta R. Nathwani
40
41. 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
CCT260H - Shanta R. Nathwani
41
42. 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
CCT260H - Shanta R. Nathwani
42
46. 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
CCT260 - Shanta R. Nathwani
46
Title
Menu
Main Area
Content
Footer
47. CODING YOUR SITE
<body>
<div id=“title”>
</div>
<div id=“menu”>
</div>
<div id=“mainarea”>
<div id=“content”>
</div>
<div id=“footer”>
</div>
</div>
CCT260 - Shanta R. Nathwani
47
Title
Menu
Main Area
Content
Footer
Note that ‘id’ or ‘class’ values cannot
contain spaces
48. PREPARING YOUR STYLE
<head>
<style type="text/css">
div {
border: solid 1px;
}
#title
{
}
#menu
{
}
CCT260 - Shanta R. Nathwani
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
50. 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;
CCT260 - Shanta R. Nathwani
50
51. FORMATTING YOUR DIVISIONS
CCT260 - Shanta R. Nathwani
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;
54. COMPLETING DIVISIONS
CCT260 - Shanta R. Nathwani
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;
56. 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)
CCT260 - Shanta R. Nathwani
56
57. 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
CCT260 - Shanta R. Nathwani
57
60. 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…
CCT260 - Shanta R. Nathwani
60
61. IMAGES
CCT260 - Shanta R. Nathwani
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”/>
62. THE ALT AND TITLE TAGS
CCT260 - Shanta R. Nathwani
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" />
63. THE ALT AND TITLE TAGS
CCT260 - Shanta R. Nathwani
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!
64. FLOATING IMAGES
CCT260 - Shanta R. Nathwani
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.
65. RESIZING IMAGES
CCT260 - Shanta R. Nathwani
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
66. BACKGROUNDS
CCT260 - Shanta R. Nathwani
66
• Background for an
entire page
<style type="text/css">
body
{
background: url(floral.jpg);
}
</style>
67. BACKGROUNDS
CCT260 - Shanta R. Nathwani
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>
68. OPACITY
CCT260 - Shanta R. Nathwani
68
• You can set the
opacity of items on
you page as well
#box
{
…
filter:
alpha(opacity=60);
/* CSS3 standard */
opacity: 0.6;
}
70. 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
CCT260 - Shanta R. Nathwani
70
71. 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>
CCT260 - Shanta R. Nathwani
71
72. 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>
CCT260 - Shanta R. Nathwani
72
73. 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
CCT260 - Shanta R. Nathwani
73
74. 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>
CCT260 - Shanta R. Nathwani
74
There are two methods of placing video on a website using
the <iframe> and <video> tags.
75. 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)
CCT260 - Shanta R. Nathwani
75
77. 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
78. 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