This document provides an introduction to basic coding languages used to build websites, including HTML, CSS, and PHP. It explains that while deep coding knowledge is not needed, understanding some basic coding can help when using content management systems. HTML is used to structure web pages, CSS is used to format pages, and PHP is a scripting language used to dynamically generate web content. The document provides examples of HTML tags for paragraphs, lists, and links to demonstrate how coding is used to build web pages.
2. Coding: Why Bother?
DoI have to learn programming, too?
Not in a deep way.
(Unless you plan a career change.)
What’s the benefit?
You’ll likely run into some basic coding
using a CMS. Understand the potential for
the technology.
3. Alphabet Soup: Languages of
the Web
HTML – HyperText Markup Language
CSS – Cascading Style Sheet
Used to format web pages: Fonts, sizes, color,
positioning, etc.
Php – Hypertext PreProcessor
Scripting language that generates web
pages on the fly.
jQuery – Code library. Makes it easy to create
animated effects, slideshows, drop-down
menus
4. Square One: What is a Web
Site?
A collection of files
stored on a
computer called a
web server.
Text files
Graphical files (.jpg
or .gif, for example)
Files that contain
scripts that make
programs run.
6. How Does Your Blog Differ?
It doesn’t really. It’s a type of web site.
Bloggingsoftware automatically
generates web pages.
Blogging software = CMS
It’s a “rapid production tool.”
7. A Typical Web Page
Can be created using
any word processor.
It’s usually written using
code called HTML or
“hypertext markup
language.”
It’s saved with the file
extension
“.html” or “.htm.
8. Example
Open a browser and call up a web page
View Source
Thiscoding contains instructions to the
web browser
on how to display the page.
9. How Web Sites Get Created
Coding
typed in by hand.
(Outmoded, but some purists do it!)
Graphical
editors
Dreamweaver, for one…
Content Management Systems
(Proprietary, other, including Wordpress,
Drupal)
10. Disclaimer
Programs such as
Dreamweaver are not
used to produce large
sites!
We’re using it as a
learning/editing tool.
Large-scale web
production requires
a Content Management
System: CMS
11. A Word About HTML Tags
HTML codes usually work in pairs.
Opening tag: <tag>
Closing tag: </tag>
Example: <b>Then you add some text
here.</b>
Note: Some tags are formatted this way:
<br />
12. Paragraph Tag
HTML does not recognize blank lines. You must format breaks with a tag:
<P> </P>for paragraph, <br /> for a single line break.
<html>
<head><title>My Homepage</head></title>
<body>
<p>
Hello world. This is my text for my page. Hello world. This is my text for my
page. Hello world. This is my text for my page. Hello world. This is my text for
my page. </p>
Hello world. This is my text for my page. Hello world. This is my text for my
page. <br />
Hello world. This is my text for my page.
</body>
</html>
14. Links
HTML is all about linking.
You click a link to get to another page/site.
Syntax for links:
<a href=“http://www.boston.com”>Click this!
</a>
<a href=“page.html”>Click this!</a>
15. How Does This Work in Your
Blog?
Know Basic HTML tags to get “under the
hood”
and fix stuff!
Beware of “cut and paste” from MS Word.
Keep it clean!
16. CSS: Cascading Style Sheets
Used to define Connection to Your
layout, formatting Blog or Web Site?
of web pages.
Applies changes
across the entire
site.
Usedin addition
to HTML.