Embed Size (px)
Citation preview
The Creative Computer Labcreativecomputerlab.com
Lesson 1
HTML Basics
What we are going to do today
Become familiar with web development tools
Build our own web page from scratch!
Learn where to find online help on web development
Learn about the web development work flow
Create our own custom multi page web site
Required Tools Any text editor. It is recommended to download and
install Notepad++ from : https://notepad-plus-plus.org/
Google Chrome or Firefox Browser for viewing work in progress.
Online HTML editors:You can experiment with code and get instant results before deciding to add the code to your web page. http://www.w3schools.com/html/tryit.asp?filename=try
html_basic
http://www.htmlinstant.com
Web Development Resources
The web is full of tutorials on web design. Here are just a few:
W3Schools: http://www.w3schools.com/
HTML Dog: http://htmldog.com/guides/html/
Google: Type in a phrase which describes what you’d like to
know. Example: “How to add an image to a web page”
This is the first link in the search results:
http://www.w3schools.com/html/html_images.asp
What is HTML?
HTML stands for “HyperText Markup Language”.
The HTML language is made up of symbols called “tags” which give instructions to the browser on how to render content on a web page.
HTML is an accepted standard set of rules of which all browsers must follow to assure consistent behaviour.
However, different browsers have minor variations on the standard
which can lead to inconsistent behaviour in some cases.
Therefore, all HTML code which is being developed must be tested in as many different browsers as possible. i.e.:
Google Chrome, Firefox, Internet Explorer, etc.
Create a Working Folder
Create a folder named “HTML” (or whatever you’d like) on your
desktop. Right click on the desktop and choose “new->folder” :
You should be able to navigate to your folder easily through the file
explorer:
Hello World!
To create our first web page:
Open a new file to edit and type:
<!DOCTYPE html>
<html>
<body>
Hello World!
</body>
</html>
Note: you can copy the whole block above and paste it into your file.
Hello World!
Save the file with an .html extension. For example: “helloWorld.html”: The “.html” extension tells Notepad++ that this is an HTML file. The
syntax coloring and block structure will be recognized:
We’ll describe syntax coloring in detail later on.
Launch Your Page From the File System:
2. Open your web page in the browser:
Since it’s an html document, you can double click on it and it will display in the browser:
View Your Page:
The browser will open and display your page:
Note that the URL in the address bar indicates the file on your computer which is being displayed.
Your First Web Page Explained
The document header
tells the browser which
version of HTML to
use. This header means
to use HTML 5.
The “html” element is
enclosed in opening
and closing “html” tags.
This specifies that the
content of the
document is HTML.
The “body” element
is enclosed in
opening and closing
“body” tags. This is
where the content to
be displayed in the
browser is placed.
The “content” of the HTML page which is
displayed to the user is placed inside the body
element.
The web page is made up of content, tags and elements. We will define these shortly.
Modify and View Your Web Page: Add another sentence to your “Hello World!” page:
Save the file.
Refresh the page in the browser:
Note: the next sentence did not appear on a new line.
That’s because we haven’t specified the new line break. We’ll learn
about that next…
Why is Everything on the Same Line?
HTML is a markup language, therefore, we need to specify
when to add a new line. This is done with the tag:
The tag is one of the few HTML tags that does not
need a closing tag.
“br” stands for line break.
Web Page Development Work Flow:
The most efficient way to develop web pages is to work on them on your computer and to check your work by running them in the browser.
Here’s an outline of the workflow:1. Create a .html file and save it.2. Launch the .html file in the browser to view it.3. Make a modification to the .html file and save it.4. Reload the page in the browser to see the
modification. Once we have the page up in the browser, we simply
reload it every time we make a modification to the .html file (steps 3 and 4). Remember to save the file before reloading!
Jargon: Content, Tags, and Elements,
Content is what is being displayed on the web page. Content can be words, pictures, sounds, etc. In our example, the sentence “Hello World!” is the content.
Tags are special reserved words which tell the browser how to render the content. For example <body> and <html> are tags.
Elements are HTML objects* which have been created by opening and closing tags. For example <body> … </body> is an element created by a matched set of opening and closing tags.
Read more about tags and elements here: http://htmldog.com/guides/html/beginner/tags/
* We’ll explain more about objects later when we learn about JavaScript.
HTML Element Syntax - Opening and Closing Tags
We have already seen an example of syntax in action when creating the body element.
Most elements are defined by an opening and closing tag. Example:
The body element opening tag: <body>
The body element closing tag: </body>The forward slash ‘/’ symbol designates a closing tag.
The syntax rule is that the opening tags must have a corresponding closing tag.
This way the browser can determine when the body element begins and when it ends.
Opening and closing tags are required by the browser in order to operate in a predictable manner.
Most (not all) HTML tags must be used as opening and closing pairs.
HTML Syntax
What is syntax in a computer programming language?
Syntax is the set of rules governing the composition of text and symbols
to create a set of instructions which a machine can follow.
Syntax must be exact and unambiguous because unlike humans,
machines have no reasoning ability.
Machine Limitation Example:
Try to figure out what the following sentence is saying:
“Y0u c&n und3r2t&nd th1s bu7 a c0mpu73r c&nn07.”
Do you think a machine can figure this out?
Start With Good Coding Habits
As your web page grows in size, it will become more complex and harder to read.
Indented paragraph blocks can be used to clearly distinguish HTML elements and minimize confusion.
Note how the “Hello World!” content is indented to be easily seen that is inside the body element.
Also note how the body element is contained within the html element:
vs.
HeadingsHeadings are defined by the <h1> through <h6> tags.
Turn your sentences into headings like so:
Remember to close your heading tags as shown above.
Notice the spacing between the HTML and body elements.
Also notice how the <body> element is indented because it is inside the HTML element.
Heading Example
Copy and paste the following code in your document inside
the <body> tags:<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
Read more about headings here:
http://www.w3schools.com/html/htm
l_headings.asp
Save the file and
refresh the browser:
HTML Paragraphs
The <p> tag defines paragraph blocks.
Create two paragraphs in your document and see the result:
Read more about paragraphs here:
http://www.w3schools.com/html/
html_paragraphs.asp
HTML Paragraphs (continued)
The code from the previous page looks like this in the browser:
Add A Link to Another Page
A link element is created using the <a> tag:
The “a” stands for anchor.
Add a link to another page:
Copy and paste the following code into your .html file:
<a href="http://google.ie">Search the Web </a>
Read more about links here:
http://www.w3schools.com/html/html_links.asp
Create Our First Web Page
Let’s create a page about some of your favorite things. We’ll
start with a page header plus some sub-headings and a
paragraph. Copy and paste the following code into a new file
and name it “favorites.html”:
<!DOCTYPE html>
<html>
<body>
<h1>My Favorite Things</h1>
<h2> Music</h2>
<h3> Spice Girls </h3>
<p>
The Spice Girls are my favorite band.
</p>
</body>
</html>
The Code
When you save the file as “favorites.html” the “.html” file
extension tells the system that this is html code and the text
coloring becomes active The HTML code should look like this:
Save the File and Load the Page
The page should look like this in the browser:
By the way, you can choose your favorite band. You don’t have
to choose the Spice Girls ;)
If you’d rather think about sports, then choose your favorite
team or athlete.
Add an Image
Place your image in the same folder as your HTML page.
The image tag has the following syntax:
Here’s an example where you can specify the image size:
The alt attribute is optional. It specifies the text to display if the image
cannot be displayed.
Read more about images here:
http://www.w3schools.com/html/html_images.asp
How to Get an Image from the Web
You can take any image from the web and use it for your own
page. Here’s how to do it:
1. On the web page which contains the image you want, right
click and select “Save Image As”:
Get an Image from the Web (cont’d)
2. Be sure to save the image in the same folder as your .html file !
3. Notice that image file names taken from the web have really
long names. Replace this long name with an easy name to type:
Add the Image Code
Copy and paste the following image code to your .html file. Be
sure to change the image name to the name which you gave it
when you downloaded it:<img src="spicegirls.jpg" style="width:300px; height:300px">
Your Page So Far:Woo Hoo!
Be patient, we’re about to make
this look better.
First, lets finish adding the content.
We need to add a more descriptive
paragraph and a navigation bar to
other pages.
Add a Descriptive Paragraph
You can add text to your page by simply copying and pasting
text from another website or any other document.
Here’s how to copy and paste a paragraph into your own page:
1. Select the text you want to copy. Right click and copy:
Add a Descriptive Paragraph1. Paste it into your .html file.
2. IMPORTANT: Be sure that the text is surrounded by paragraph tags <p> and </p>:
1. Most paragraphs copied from documents will end up being one long line. That’s Ok, let it run. Just make sure the paragraph ends with a </p> tag as shown above (as well as starting with a <p>tag).
Unordered ListsWe will be using an unordered list to create a navigation bar.
For now, lets have a look at how they work:
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).
Read more about unordered lists here: http://www.w3schools.com/html/html_lists.asp
Create a Navigation Bar
We’re going to create a navigation bar at the top of the page
using an unordered list of links. Add this so that it’s the very last
element in the <body> of your .html document:
Copy and paste this code to the bottom :
<ul>
<li><a href="http://spicegirls.wikia.com/wiki/Spice_Girls">Spice Girls</a></li>
<li><a href="https://www.youtube.com/"> Videos </a></li>
<li><a href="http://google.ie">Search the Web</a></li>
</ul>
Your Page So Far
We’re done with adding the content. Now its time to apply
style to the page:
Cascading Style Sheets
What are they?
We are now going to create a Cascading Style Sheet (CSS) to
add style to the web page. Here are some CSS facts:
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple
web pages all at once
External stylesheets are stored in CSS files
Enhance your web page using CSS
The first thing you need to do is to create a new .css file:
1. Create a new file in the same folder as your .html file and
name it “style.css”
1. You can choose File->New in Notepad++
2. Or you can create directly in the windows explorer:
3. Be sure that the “style.css” file ends up in the
same folder as your .html file!!
Linking to a CSS fileYou now need to create a way for your .html file to link to the “style.css” file.
Inside your .html file you have to create a <head> section which contains a <link> element.
The href attribute of the <link> element specifies the name of the .css file to be linked to the HTML document.
In our example the .css file is called “style.css”:
Here’s the code if you need to copy and paste it in:<head>
<link rel="stylesheet" type="text/css" href="style.css"></head>
Style the Document BodyThe following code operates on the <body> element in the .html page. In this example, we’re setting the width, background color, and centering the page:
Paste in the following code to your new style.css file:
/* Set the style for the page body */
body {
width:600px;
background-color: LightYellow;
margin: 0 auto;
}
Have a Look
Refresh the web page and have a look.
If you don’t see any effect then check the following:
The style.css file is in the same folder as your .html file
The <link> element in your .html file correctly specifies the
“style.css” file
You typed (or copied) the style code for the body properly
and did not forget to include the curly brackets at the
beginning and end of the block.
You should see this:
A yellow background
and centered content
CSS Syntax
How do you write CSS so that the browser understands what to
do? Here’s the CSS syntax explained:
From: http://www.w3schools.com/css/css_syntax.asp
CSS Style Selectors
We will be using style selectors such as “color” and “width” ,
etc. in our project.
To get an idea of all of the possible ways to style HTML
elements have a look at the full list of style selectors here:
http://www.w3schools.com/cssref/default.asp
Color the Banner
Let’s use the text in the <h1> block as the banner:
Therefore, we must create a style block for the <h1> element
in the “style.css” file:
This should style the banner as
shown
Note: the text color selector is
simply “color”.
Margins and Padding
You can add padding to make the banner taller.
Also, you can specify the margin so that the banner text is
centered if you like:
Find out more about margin and padding style selectors by
visiting the CSS reference page:
http://www.w3schools.com/cssref/default.asp
The banner was made thicker
with padding.
Where to Find Color ChoicesWe just used two named colors to style the banner. If you’re wondering how many colors are supported in CSS then here are some links to lists of all possible HTML colors:
Named colors: http://www.w3schools.com/colors/colors_names.asp
Color groups:
http://www.w3schools.com/colors/colors_groups.asp
Color codes:
http://www.w3schools.com/colors/colors_hex.asp
Make your own custom colors:
http://html-color-codes.info/
Play around and try out various color combinations for the banner and the background.
Style the Fonts
Lets jazz up the banner text by choosing a different font.
Here is a list of web safe fonts which are natively supported by
most operating systems:
http://www.cssfontstack.com/
Go to the page and select a font you like:
Select Your Font
Each font has style blocks which you can copy and paste into
your “style.css” file. The web page allows you to adjust the size
and font type and to be able to preview the result:
Your “style.css” File
The style.css file is starting to grow.
Here’s how it should look after you’ve
added the font styling from the web:
Note: the duplicate h1 blocks are OK
because each block handles different
style selectors.
Your Page So Far
Here’s the result of applying font
styling to the h1, h2, h3, and p
tags.
The page is starting to look
better.
There’s more styling to do!
Don’t worry about the list of
links at the bottom of the page.
We’ll style them last.
More Font Sources
Google provides a large number of fonts:
https://www.google.com/fonts
There are plenty of designer fonts available on the web. Here’s
an example:
https://wdexplorer.com/20-examples-beautiful-css-
typography-design/
Set the Image in the Paragraph
Go to your .html file and type in the following style code.
Before:
After:
This is called “inline style” because it is done in the opening .html tag.
This is OK for images because each image tends to be unique.
Result - FloatingThe image now “floats” to the right. Find out more about floating and layout here: http://learnlayout.com/float.html
Challenge 1: Adjust the font and image sizes to get a nice layout to your page.
Challenge 2: Can you figure out how to create a margin around the image so that it is not crowded up against the text?
The Result of Minor Style Adjustments
The font sizes have been
adjusted and the image has
been given a margin.
Challenge: Notice how the
edges of the text are straight
on both the right and left
sides. The text alignment has
been set to “justify”. Can
you figure out how to set
this style attribute? Hint: ask
your friend Google
Style the Navigation Bar
A navigation bar is an essential component of a web page. It allows
the user to navigate to other pages. A web page would be useless
without a navigation bar.
We need to add style to the unordered list and its list items so that
they look and feel like a navigation bar.
The first step is to set the background color of the unordered list.
Create the following style block for the ul tag in “style.css”:
ul {
background-color:lightgray;
padding:20px;
margin: 0 auto;
}
Paste this:
Style the Navigation Bar List Items
The next step is to style each list item which are denoted by the li tag
so that:
1. They lose the bullet points - set list-style-type to “none”.
2. They display horizontally instead of vertically – set display to
“inline”
3. They have a margin between them – set margin-right to 15 pixels
Each line in the style block does the above:
ul li {
list-style-type:none;
display:inline;
margin-right:15px;
}
Paste this:
Style the Navigation Bar Links
Style the links denoted by the a tag so that:
1. They lose the underlining - set text-decoration to “none”.
2. They have plenty of space around them – set padding to 20 pixels
3. The font color isn’t pure black – set color to #333 which is a dark
grey.
Each line in the style block does the above:
ul li a {
text-decoration:none;
padding:20px;
color: #333;
}
Paste this:
Change Link Color On Mouse Over
It is possible to create a link which changes color when the
mouse hovers over it. Just add the following style block to your
“style.css” file:
ul li a:hover {
color:blue;
background-color:tan;
}
Paste this:
The Code and Result
The Code: The Result:
Navigation Bar Challenges
The navigation bar is still not quite done. Here are some
challenges:
1. Make the links in the navigation bar stand out more by styling the fonts.
2. Center the links across the width of the page.
3. Place the navigation bar at the very top of the page.
Result:
Rounding Corners
You can round corners of
HTML elements by applying
the border-radius
property. The corners of the
header, navigation bar and
image have been rounded to
give a nice effect.
Challenge: Look up how to
round corners of HTML
elements on the web and
apply the style to your page.
Changing Styles
Now that you’ve mastered how to apply CSS you can change the style,
look and feel of an entire web page/website by just modifying one .css
file. Here are some styles applied to the same HTML page:
More Styles
The content hasn’t changed, just the style:
Inserting a YouTube Video
Right click on a YouTube video and select “Copy embed code”:
Inserting a YouTube Video
Paste the code into the desired place in your code:
Things to note:
1. The embedded video is wrapped in an iframe element.
2. The width and height can be adjusted to fit your page layout.
Inserting Your Own Video
HTML5 supports a <video> element to play videos on a page.
Example use:
Link to More Info on the Video Tag:
http://www.w3schools.com/html/html5_video.asp
Things to note:
Use a poster of the first frame of the video in case the browser
does not support it.
Autoplay is not supported on mobile devices.
Video Source Code
Paste this code into your page. Be sure to include the “high-
zoom.mp4” and “high-zoom.jpg” files in the same folder:
<video width=360px controls poster="high-zoom.jpg">
<source src="high-zoom.mp4" type='video/mp4' >
Your browser does not support the video tag.
</video>
The Bootstrap Grid System
Bootstrap is a CSS / JavaScript framework which provides a
page layout system which adapts to different device screen
sizes. This is known as “Responsive Design” as the page layout
responds to the device screen size and thus looks good on all
devices.
W3Schools Overview:
http://www.w3schools.com/bootstrap/bootstrap_grid_syste
m.asp
Bootstrap Page:
https://getbootstrap.com/
