Basics of HTML (some repetition)
Cascading Style Sheets (some
Contents
• HTML Quiz
• Design
• CSS basics
What, why, who?
• Before you start to create a site, it’s vital that you have clear in
your mind
– What type of site you are creating?
– Why you are creating the site?
– Who the site is for?
• Plan your layout and menus (navigation)
– Pen and paper
– Whiteboard
• Mockups (closer to final)
– Use special mockup programs
– Graphic editor as Paint .NET
– Powerpoint or whatever you got
• Design rules
– Menu to the left and content to the right
Balsamiq Mockups
Writing For The Web 1
• Think about who you’re writing for?
• Don’t start with a long "welcome" intro...
• Don’t assume that everyone reading your Web site will have
an enormous screen or a fast internet connection
• Keep paragraphs short and columns narrow
• Line spacing of 1.5 or 2 is good
• Never use blue or underlined text
• Stick to the various conventions
• Don’t arrange text in columns such that the reader has to
scroll the screen up and down
• Don’t waste too much above-the-fold
• Check the spelling of your pages
• Swedish characters problem – å, ä, ö
Writing For The Web 2
• Fonts
– Fonts are important. Some are more readable on screens, don’t use non-standard fonts that your readers are unlikely to have installed on their computer
• Colors
– Readers will use your site’s color scheme to form a subconscious opinion about you :-)
• Hyperlinks
– Those 1 or 2 words, normally in blue and underlined, which your visitor can click on to move to another local page or another site on internet.
– <a href="more.html">More local stuff</a>
– <a href="http://www.google.com">Google</a>
• Mailto links
Repetition basics of HTML 1
• An HTML file contains a mixture of pageRepetition b
asics of HTML 2
• Tags: <tag> your content </tag>
– The <head> tag contains information about the page as a whole
– The <title> tag which is where your page’s title gets put
– The </ > tag means "close the previous tag"
– The paragraph <p> tag starts each new block of text
– The <b> tag makes text bold and <i> makes it italic
– 6 heading levels, the main heading on your page may be <h1> or <h2>
• Meta tags
– Meta-tags are a way for a web page to supply information about itself to the web browser that is displaying the page
<meta name="description" content="Latest availability for the Grand Hotel"> <meta name="keywords" content="availability, late bookings, vacant rooms">
• HTML visibility
– Everyone that can view your page can read and copy your code
•
HTML validation ensure that your code is correct
Accessibility design
• Build accessibility (people with sight and mobility problems) in
as early as possible in the overall design process since it can
be very very time-consuming to retrofit as an afterthought
– Provide alternative ALT text for every picture or image that you use
– Don’t create information which can’t be understood by those who can’t see colours properly
– Ensure that there is sufficient contrast between text and background colours
– Avoid scrolling text and other dynamic effects
– Avoid any technique which may produce flickering effects on-screen
– Use the clearest and simplest language for site content
– Keep paragraphs short, and include some white space between them
– Do not use frames, screen readers don’t like them.
– Dark text on a light background works better that light text on a dark background
Cascading Style Sheets
• CSS enable separation of apperance and content
–
Old way to do styles
<p><font face=verdana size=12pt> Your content </font><p>
–
Tag style
p { font-family: Verdana; size: 12; }
• All your pages which are linked to the specific CSS file
will be changed according to the configuration
• Pre HTML5 DOCTYPEs and DTD (Document Type
Definition)
–
The two main document types are XHTML 1.0 Strict and
XHTML 1.0 Transitional
• Transitional is the version that allows both new-style CSS as well as old-fashioned <font> tags
The style element/attribute
• The style= attribute can be used on most tags but is not
recommended to use
– Defines features for a single HTML element, e.g.
– <p style=”text-align: center”>Center me.</p>
• The <style> element: <style type=”text/css”> ... </style>
– The <style> tag always goes in the <head> section
– Defines style information for the whole HTML page
– Requires the type=”text/css” attribute if using XHTML or HTML < HTML5
• Example style for the selected element: body
<style type="text/css">
body {
background-image: url(image.jpg);
font-family: Verdana,sans-serif;
font-size: 20px;
color: green; }
The style element/attribute
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
CSS font properties: http://www.w3schools.com/css/css_font.asp
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */
CSS
Reference
http://www.w3schools.com/
CSS and the link tag
• To link to a external separate CSS style sheet, use the
link tag instead
– <link rel=”stylesheet” type=”text/css” href=”string”>
– rel= relation between the page and the destination resource
– Requires the type=”text/css” attribute if using XHTML or HTML < HTML5
– More about CSS later!
body
{
font-family: verdana, sans-serif; }
div
{
position: relative;
left: 30px; }
p,ul,li {
font-size: 10pt; }
<!-- class and id based CSS below, TBD later --> .boldText{
font-weight: bold; }
#content
{
margin-left: 140px;
CSS – cascading style sheets
• CSS is an extension to basic HTML that allows you to
style your web pages apperance
– Style separates content from apperance of your page
– CSS can be used to specify fonts, colors, image background, the looks of your links and many other attributes
• CSS can be embedded into your webpage (head or
inline) or stored in an external text file that you can then
link to your web page
Class based styles
• A class is a style that you can use anywhere on a web
page, rather than for a particular HTML tag
• You can customise and create styles to the way you want
and reuse them anywhere
<body>
<p class="mystyle">Hello World </p>
</body>
<!-- or p.mystyle if you want to be more specific --> .mystyle
{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
Basics of CSS
• Format > Style Sheets > Link option to enable
CSS file in Amaya
Basics of CSS
• Fonts and CSS
– Sans-serif fonts are Arial, Verdana etc.
– Serifs fonts are Courier New, Times New Roman etc. with embellishments on the ends of the characters
– Serifs fonts works best for body text and sans-serif fonts for headlines and picture captions
• Fixed with fonts versus different width fonts
– Usually different width fonts looks best
• Making Styles work for you
– Keep the number of styles (tag and class) to a minimum
– Choose your class names with care. Pick names based on what the class is used for, not what it looks like
• Use a better CSS editor
HTML Markup Tags Names
• To make the most of HTML and CSS you need to know what
tag names are available to you
ID-based styles
• HTML allows you to assign a unique name, or id, to any tag on
a page. The only stipulation is that a name must be unique on
that page
–
<h2>About Cheddar Cheese</h2>
• We can give this heading a unique id by changing the opening
h2 tag thus
–
<h2 id="about-cheese">About Cheddar Cheese</h2>
• Unless you say otherwise, this heading will appear as any h2
heading would, according to the h2 entry in your style sheet.
But because this particular heading has its own id, we can do
something rather clever in the css file, like this
• Notice that ID have
#
and class have
.
as first character in the
style name
TopStyle CSS editor
CSS size %, px, em or xx-small - xx-large
The unit em is relative to the users selected size for elements as font etc. If the users selected font size is 16px, 0.75em is equal to 12px. % works similar. In design with absolute layouts and
many graphical effects pixels are simpler to work with.
More about CSS
• CSS can be very complex to set up
– There are 600 pages+ books in the subject!
•
It is advised to begin with a ready-made design from resources
as:
http://oswd.org
or
http://www.opendesigns.org/
•
One of the most important concept in css-based layout is the
”css box model”
– It explains how padding, spacing, justification
(left, right, centred, etc.) and margins interact to affect the final position of an item on a page
Page layouts and div tags
• Many web sites typically use a top section that uses the whole
width of the page and a 2 or 3 column layout below
– Having the the title, logo etc. at top, the menu in the left column, and the content in the other column and perhaps a footer
•
CSS in combination with
<div>
tags can achive this layout
Page layouts in HTML5
• Doing the same layout in HTML5 works in a similar way
– Using the markup that is suited for layouts like below
