Transcript HTML overview

Overview of HTML
Three Different Approaches
 Text editor like Notepad
 HTML editor such as:
– KompoZer
– DreamWeaver
– Microsoft Expression Web
– iWeb (Mac)
– Coffee Cup, Etc.
 Content Management, blogs, etc.
Why do it the hard way…
 Web site development is much more
sophisticated than HTML






PHP
E-commerce
Ajax
jQuery
ASP
Python






JavaScript
Java
CSS
Ruby on Rails
XML
Server side scripting
 Need to be able to tweak codes
from web editors.
What is HTML?
 HTML (HyperText Markup Language) is a
special language which tells the browser how
to format text in a www document.
 An HTML file consists of text and tags.
 HTML uses CSS for page layout and design
 HTML5, still evolving, includes more features,
better plugin support, and more semantic tags.
Syntax
 Contains tags that dictate how the content will
appear, i.e. formatting.
 Examples:
<b>Happy</b>
<br>
Applies bold to the word
Breaks the line
 Some tags include attributes that alter the basic
command, for example:
<h1 class=“feature”> Welcome </h1>
Other Characteristics
 The format is text files, with .htm or .html
extension.
 Hard returns, tabs, and extra spaces are ignored.
 DO NOT use spaces in file names.
 File names ARE CASE SENSITIVE.
 Tags are not case sensitive, but the standard is
lowercase.
One More Thing…
The first page in a web site should be named
index.htm or index.html.
Because it’s the default filename, it nicely
shortens your URL
example:
www.cofc.edu
instead of:
www.cofc.edu/index.htm
Displaying an HTML File
 Use any browser software – such as
Chrome, Firefox, Internet Explorer, Safari,
etc.
 Also, use any OS —such as Windows, IOS,
Linux, Android, etc.
Beginning Skills
•The basic tags for an HTML file
•Heading tags
•Paragraph tags
•Use attributes (such as width=" ")
•Line breaks
•Indent with blockquote
•We will also insert an image
In-Class Practice
OBJECTIVE: Write a webpage about a simple topic.
See the handout.
…For practice only; not to turn in.
…When creating web sites, it is extremely important to
organize files in the proper folders …
Get Started
 Open My Computer
 Create a folder called “_____ ”
 Find a picture and save it in the folder.
(less than 600px width is best)
 Open Notepad or Textwrangler (for Macs)
 Open any browser