Coding Basics for Websites

Madison Public Library -- Central

Tuesday, February 21, 2017

This presentation and slideshow copyright ©2017 Leemark Communications.

SOME DEFINITIONS:

HTML -- HyperText Markup Language. The method of adding tags such as <p>Hello
world!</p> to a document to allow the content to be properly displayed and formatted by
a Web browser.

CSS -- Cascading Style Sheets -- Content that is "marked-up" using HTML (various tags)
can be given styles (certain fonts, colors, line spacing, justification, etc.) using styles
(CSS). It's called Cascading Style Sheets because you can create one stylesheet for your
entire Web site, which will generally apply, but then override those styles by a stylesheet
at the top of a specific Web page, which in turn can be overrode by styles within the
HTML page itself.
SOME DEFINITIONS:
The DOM -- Document Object Model -- A convention for naming all parts of a Web
page/Web browser ???

FTP -- File Transfer Protocol -- A method of uploading or downloading files from another
computer. Files such as HTML, CSS and other Web site files are usually uploaded to a
Web server using FTP or SFTP (secure FTP).

NotePad -- A very simple text editor that comes with most Microsoft operating systems.
Doesn't color code text, have a spell checker or validate HTML.

NotePad++ -- A no-cost, open source text editor for Microsoft Windows, available at
https://notepad-plus-plus.org/. Allows you to automatically color code your markup (to
make it easier for you to spot things when creating your HTML pages), have multiple
pages open in tabs and other features.
SOME DEFINITIONS:

CMS -- Content Management System -- A more automated setup for creating Web sites.
End users can create content without knowing HTML. A few CMS examples include
Drupal, Joomla!, WordPress, and DotNetNuke. There are many others.

View source or View page source -- Lets you view the underlying HTML of a Web page
(exactly how it looks will depend on the Web browser you are using). By looking for
stylesheet links in the HTML markup, you could also download and study the external
CSS file.

Hexadecimal -- a base-16 number system which can be used to describe colors using
HTML or CSS. The first two digits are the red value, the second two digits are the green
value and the last two digits are the blue value. Examples: #000000 is black, #FFFFFF is
white, #00FF00 is green and #FF6600 is an orange.
JUMPING RIGHT IN

Web design and development technologies have gotten

quite complicated and varied (HTML, CSS, JavaScript, Java,
Flash, PHP, MySQL, etc., etc.), but just about anybody can
make a Web page.
EXERCISE 1:
1. Right-click on your desktop and select New > Text Document and name it index.txt.

2. Double click on the file and it should open in NotePad. In the open document, type:

Hello world!

This is my Web page.

I'll be glad if you can read this. Really glad!

Copyright 2017 John Doe.

3. Save the file and close NotePad.

(EXERCISE 1 -- continued:)
4. Right-click on that file on your desktop and rename it to index.html -- For the warning
that says "If you change a file name extension, the file might become unusable. Are you
sure you want to change it?", click "Yes".

(NOTE FOR DOING THIS AT HOME: Windows is often set up to hide file extensions. You
may want to have Windows not hide the file extensions when creating HTML pages, so
you can see what is a .html file, what's .css, what's a .jpg and .gif, etc.)
(EXERCISE 1 -- continued:)

5. Double-click on that index.html file on your desktop and it should open in a Web
browser and look like this:
Hello world! This is my Web page. I'll be glad if you can read this. Really glad! Copyright
2017 John Doe.

(The URL for the page, in the Web browser’s address bar, should be something like
file:///C:/Users/USERNAME/Desktop/index.html if you loaded this page from your hard
drive.)

Your Web browser should display all of the text you typed. Cool! But it is all on one line
and there are no carriage (line) returns or extra spaces. No boldface text, italics, colored
text or anything like that either. Not cool!
EXERCISE 2: Enter HTML

HTML is a markup language for putting tags around

content to tell a browser what kind of content it is, and
ultimately, how it should be displayed. Normally, every
opening tag (such as <p> for paragraph) must be closed
with an accompanying closing tag (in this case, use </p> ).

Example: <p>Hello world!</p>

EXERCISE 2: Enter HTML
At its most basic, an HTML page might look like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello world!</p>
<!-- This line is a comment in HTML. You can use it to put in notes/reminders for
yourself/others. The browser will ignore this. -->
</body>
</html>

HTML tags provide SUGGESTIONS for the Web browser on how to handle content, and
what kind of content it is. Not every browser handles everything the exact same way.
EXERCISE 3: Adding HTML to our first example
<!DOCTYPE html>
<html>
<head>
<title>John Doe's Web page</title>
</head>
<body>
<p>Hello world!</p>
<p>This is my Web page.</p>
<p>&nbsp; </p>
<p>I'll be glad if you can read this. &nbsp; &nbsp; &nbsp; Really glad!</p>
<!-- each &nbsp; text above is a way of forcing a single extra space in HTML -->
<p>Copyright 2017 John Doe.</p>
</body>
</html>
EXERCISE 4: Going further ... the OLD way:
<!DOCTYPE html>
<html>
<head>
<title>John Doe's Web page</title>
</head>
<body>
<h1>Hello world!</h1>
<p><font color="#FF6600">This is my Web page.</font></p>
<!-- font color= … is the OLD way of changing text color in HTML -->
<p>&nbsp; </p>
<p>I'll be glad if you can read this. &nbsp; &nbsp; &nbsp; <strong>Really
glad!</strong></p>
<p>Copyright 2017 <strong>John Doe</strong>.</p>
</body>
</html>
EXERCISE 5: CSS, a better way to provide layout requests to the Web browser.
<!DOCTYPE html>
<html>
<head>
<title>John Doe's Web page</title>
<link rel="stylesheet" type="text/css" href="./style01.css">
<!-- coding above refers to external stylesheet titled style01.css, applied to entire page -->
</head>
<body>
<h1>Hello world!</h1>
<p style="color:#FF6600; font-family: serif">This is my Web page.</p>
<!-- style= … above is CSS to be applied just to above paragraph -->
<p>&nbsp; </p>
<p>I'll be glad if you can read this. &nbsp; &nbsp; &nbsp; <strong>Really
glad!</strong></p>
<p>Copyright 2017 <strong>John Doe</strong>.</p>
</body>
</html>
ADDITIONAL TIPS:
- You should use a doctype declaration at the start of your HTML document.
See https://www.w3schools.com/tags/tag_DOCTYPE.asp for more info. on this.
According to the above Web site:
The <!DOCTYPE> declaration must be the very first thing in your HTML document,
before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web
browser about what version of HTML the page is written in. Hence, you use:
<!DOCTYPE html> for HTML 5 documents
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
for HTML 4.01 Strict documents
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
for HTML 4.01 Transitional documents
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
for HTML 4.01 Frameset documents
ADDITIONAL TIPS:
- Learn by doing -- try HTML on your own local computer and hard drive and then load in a
Web browser (CTRL-O to open file).

Even if you don't end up using HTML to create Web pages, it can be worth knowing
because it can:
- Let you to make some tweaks using many popular CMSs. (Change something to
boldface or orange, for example).
- Let you create more styled (HTML-based) e-mails.
- Let you take a peek and see a bit of what is going on behind the scenes of other
Web sites.
- Be fun to practice and a good mind challenge.
- Let you author your own interactive story for your child.
- Create a repeating bulletin board or other textual/visual/aural display on your
computer for an office or home monitor.
ADDITIONAL TIPS:
- UPPERCASE vs. lowercase: some languages/computers/applications are case
sensitive, some are not, so it's best practice to always assume things are case sensitive.
I normally use lowercase when coding my HTML.

- Best practice: always name files for the Web in lowercase and use only letters, numbers
and the - (dash) or _ (underscore) characters in the file name itself and then a period and
then the file extension also in lowercase (such as .jpg or .png or whatever). In some
operating systems, UPPERCASE and lowercase letters are not interchangeable for file
names (hotel.jpg is different than Hotel.jpg), so I always stick with all lowercase for file
names on Web sites. Also, never use spaces in file names.

- File names that are short but still make sense are better for accessibility for blind people
and for search engine optimization.
ADDITIONAL TIPS:
So, for names, use:
november_calendar.html or nov-cal.html

rather than:
november calendar.html November Calendar.html
or November Calendar2576%%$$.html
(because you don’t want to have spaces in your file names)

And, use:
hotel_exterior.jpg or madison_hotel_exterior.jpg

Instead of msc000001.jpg or HOTEL ext53633.jpg

(because the first two are more descriptive, both for humans and search engines,
and don’t have spaces)
ADDITIONAL TIPS:
- Relative vs. absolute links:
./images/leemarklogo.gif is a relative link.
http://www.leemark.com/images/leemarklogo.gif is an absolute link.
../ tells the computer/server to go up one directory
./ or nothing before file name tells the computer/server to stay at the same level as the
HTML file this coding is contained within.
Examples:
./images/leemarklogo.gif or just images/leemarklogo.gif = look for leemarklogo.gif in the
images directory, which can be found in the same directory as the HTML file this coding
is contained within.
../images/leemarklogo.gif = look for leemarklogo.gif in the images directory, which can
be found ONE LEVEL UP FROM this HTML file this coding is contained within.

- Precision is important: Be sure to type names in your HTML exactly as they are named.
index.html is different than index.htm
my_dog.jpeg is different than my_dog.jpg
ADDITIONAL TIPS:
- If possible, test your work in multiple brands of Web browsers (Chrome, Internet
Explorer, Firefox, Safari, etc.) and on multiple types of computers (Windows laptop, Mac,
iPad, Android tablet, etc.), because sometimes things look different or are handled
differently by different browsers/devices.

- Keep notes of what you learn to remember tags you found to do something you like, or
other coding.

- Have fun!
ADDITIONAL RESOURCES:
Simple HTML tutorial:
https://www.york.ac.uk/teaching/cws/wws/webpage1.html
A page with simple HTML examples:
http://csb.stanford.edu/class/public/pages/sykes_webdesign/05_simple.html
More detailed tutorials for learning HTML:
W3Schools: http://www.w3schools.com/html/default.asp (this one is great and also has
tabs for learning CSS, JavaScript, and more)
HTML Goodies: http://www.htmlgoodies.com/primers/html/
HTML Code Tutorial: http://www.htmlcodetutorial.com/
http://www.cs.trinity.edu/About/The_Courses/cs301/html/HTMLPrimerAll.html
(the above is the tutorial I used when first learning HTML, but it is old and doesn’t cover CSS)

HTML Tags Ordered Alphabetically: https://www.w3schools.com/tags/default.asp

HTML Markup Validation Service: http://validator.w3.org/ (to check your pages for technical
correctness)

https://www.quora.com/What-are-the-10-most-important-things-to-learn-in-HTML-progra
mming
ADDITIONAL RESOURCES:
Two more links for CSS and HTML help:
CSS tutorial at https://www.w3schools.com/css/default.asp

Also see their "try-it" page at:

https://www.w3schools.com/css/tryit.asp?filename=trycss_default
Here you can alter the CSS and HTML in the left-hand column, click the green "Run >>"
button and your results show up in the right column, just like they would in a full Web
browser window. It's a good way to quickly try stuff out, practice and learn.

THANK YOU AND HAPPY CODING!