Ms Burnham's notes
advertisement
Page 1 of 12
HTML - Building a Home Page
If you are using your computer to view Internet pages, then you are using a Web
Browser. A web browser is a computer application which
1.
2.
Requests a page to be pulled through the network to your computer and
Interprets that page in order to display it on your computer screen.
The look of the page differs if you use Internet Explorer, Chrome, safari, Firefox The
page also looks different depending on what kind of computer you use (a Mac or a
PC) and it also looks different on different types of monitor resolution and screen
sizes.
A web server or http server delivers pages to web browsers to be seen on the world
wide web.
More information about the Internet can be found at
www.howstuffworks.com/category.htm?cat=Intrnt
What is HTML?
HTML or Hypertext Markup Language is the set of codes, known as tags, which are
inserted throughout a web page document. The tag tells the Web browser how the
document should appear on the screen.
These html documents, can be created using a text editor (e.g. Notepad) or by using an
HTML editor (e.g. MS Frontpage, Notetab, Dreamweaver).
What are tags?
A tag consists of a code surrounded by brackets (< and >). Usually 2 tags work
together.
e.g. The Bold tag - <b>This text is bold</b>
Tags are not case sensitive so <b> works the same as <B>
Page 2 of 12
<HTML>
<HEAD>
<TITLE>Hello World!</TITLE>
</HEAD>
<BODY>
<center>
<H1> hello world! </H1>
<H2> hello world! </H2>
<H3> hello world! </H3>
</center>
The head of the document gives information to search
engines.This is not seen by the user on the www but it
shows up on the small tabs at the top of your browser.
_____________________
The body has the part of the document seen by the user.
<P >Type content here!</font></P>
<HR>
</BODY>
</HTML>
Use a text editor program like notepad or Notetab light (at wwww.notetab.com)
1. Save your web page as page001.html. In notepad, save your document: File / Save
As. Choose "all files" instead of "text files".
Use Wordwrap.
Open your file in your browser using File / Open File. (or use the preview feature in
notetab)
You can view HTML codes used in a web page on the web.
On Chrome choose View / Developer / View Source.
Paragraph:
<P>words</P>
Headings:
<h1>this is
<h2>this is
<h3>this is
<h4>this is
<h5>this is
<h6>this is
very big</h1>
a bit smaller</h2>
a bit smaller</h3>
a bit smaller</h4>
a bit smaller</h5>
a bit smaller</h6>
Non-breaking space:
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; indents your text 4 spaces
horizontal rule or line:
<hr>
Page 3 of 12
div:
<div class=”container”>
…</div>
or
<div> … </div>
break to a new line:
<br>
how stuff works.com - big list of tags in pdf format
Lesson 2
Lists and bullets
in order to make the following
HTML CODE
(unordered list)
apples
oranges
bananas
<ul>
<li>apples
<li>oranges
<li>bananas
</ul>
in order to make the following
(ordered list)
apples
bananas
grapefruit
<ol>
<li>apples
<li>bananas
<li>grapefruit
</ol>
Page 4 of 12
Lesson 3
Hypertext Links
Link to another page on
the www
<a href="http://www.scs.on.ca"> SCS</a>
or
<A HREF="http://www.scs.on.ca" target="new">SCS</A>
Link to another page
(called page002.html)that
is saved in the same
directory as your current
page
<a href="page002.html">Go to page002</a>
Internal Link step 1
<a name="top"> </a>
Set an anchor on your
page (this one should be at
the top of your document)
Internal Link step 2
<a href="#top">Go to the Top </a>
Set a hypertext link to that
anchor
(note that this kind of link works best when you have a web
page that is bigger than your viewing screen.
Page 5 of 12
Lesson 4
USING IMAGES:
Images must have filename extensions of .jpg, .JPG, .gif, .GIF, .jpe, .JPE .PNG
or .png to be used in web pages.
IMAGE TAG:
<IMG SRC="tyloop.gif"> where scslogo.gif is the name of your image file saved
in your web page folder.
you may also use the full website location of your image
<IMG SRC="http://www.ju6y.com/typloop.gif">
typloop.gif
HEIGHT AND WIDTH:
<IMG HEIGHT="100" WIDTH="65" SRC="http://www.ju6y.com/typloop.gif">
ALTERNATE TEXT:
<IMG HEIGHT=100 WIDTH=65 SRC=" http://www.ju6y.com/typloop.gif">"
ALT="SCS Crest">
JUSTIFICATION AND LAYOUT:
<IMG ALIGN="RIGHT" SRC=" http://www.ju6y.com/typloop.gif">">
or inserted in paragraphs which are aligned to the right, left or center:
<P ALIGN="CENTER">
<IMG HEIGHT=100 WIDTH=65
SRC="http://www.ju6y.com/typloop.gif">"></P>
USING IMAGES AS HYPERLINKS
<A HREF="http://www.scs.on.ca">
<IMG SRC=" http://www.ju6y.com/typloop.gif">
</A>
Page 6 of 12
Lesson 5
USING TABLES:
<TABLE >
<TR>
<TD>
contents of row1 column1
</TD>
<TD >
contents of row1 column2
</TD>
</TR>
<TR>
<TD>
contents of row2 column1
</TD>
<TD >
contents of row2 column2
</TD>
</TR>
</TABLE>
contents of
row1
column1
contents of
row1 column2
contents of
row2
column1
contents of
row2 column2
Page 7 of 12
FORMATTING USING CSS
Colour Three ways to stipulate colour.
h1 {
color: red;
}
Notice the way that the curly brackets are used.
They are used this way in most programming languages.
.jumbotron h1 {
color: rgb(102,153,0);
}
.jumbotron h1 {
color: #9933CC;
}
You can look up the web friendly “hex codes” using a search engine.
Page 8 of 12
font-family
The font-family property sets the font of an HTML element's text.
Three fonts commonly used with font-family are:
1.
font-family: Arial, Helvetica, sans-serif;
2.
font-family: "Times New Roman", Times, serif;
3.
font-family: "Courier New", Courier, monospace;
Google Fonts is a free collection of over 600 more web fonts that you can use on your
page.
.jumbotron
.jumbotron h1
{ {
color: red;
background-color:
#0099cc;
font-family: 'Open Sans', sans-serif;
}font-size: 48px;
}
.jumbotron {
background-image:
url('http://goo.gl/ODpi3y');
}
.jumbotron h1 {
padding-top: 0px;
padding-bottom: 0px;
border: 3px solid #ffffff;
}
Page 9 of 12
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
}
.jumbotron h1 {
position: relative;
top: 91px;
left: 55px;
}
.jumbotron h1 {
margin-top: 10px;
margin-left: 23px;
border: 3px solid #ffffff;
}
Page 10 of 12
Using boostrap http://getbootstrap.com/
First use columns
<div class="row">
<div class="col-md-8">
<h4>Content 1</h4>
</div>
<div class="col-md-4">
<h4>Content 2</h4>
</div>
</div>
and it looks like this:
Page 11 of 12
<div class="row">
<div class="col-md-2">
<h4>Content 1</h4>
</div>
<div class="col-md-4">
<h4>Content 2</h4>
</div>
<div class="col-md-4">
<h4>Content 3</h4>
</div>
Looks like this:
Page 12 of 12
TABS:
<ul class="nav nav-tabs">
<li><a href="#">Primary</a></li>
<li class="active"><a href="#">Social</a></li>
<li><a href="#">Promotions</a></li>
<li><a href="#">Updates</a></li>
</ul>
And it looks like this
PILLS
<ul class="nav-pills">
<li><a href="#">Primary</a></li>
<li class="active"><a href="#">Social</a></li>
<li><a href="#">Promotions</a></li>
<li><a href="#">Updates</a></li>
</ul>
And it looks like
MORE ABOUT BOOTSRAP
http://getbootstrap.com/css/
