Creating basic HTML web pages

1
Creating basic HTML web pages
R. Chris Fraley http//www.web-research-design.n
et/P593/
2
HTML web pages

• Most web pages are written in a language called
  HTML (hypertext markup language).
• HTML files exist on a web server. When a person
  types in the URL for a specific file in his or
  her web browser, the person is essentially
  retrieving that pre-existing file from the web
  server.

3
HTML

• There are many programs that are designed to help
  you create HTML files
• Macromedias Dreamweaver
• Microsofts FrontPage
• These kinds of programs are often called WYSIWYG
  programs. They allow you to create web pages in
  the way in which you want them to appear the
  HTML code is generated in the background.

4
WYSIWYG

• There are two reasons for NOT using these kinds
  of programs if youre going to be conducting
  research over the Internet.
• Not dynamic. Well be writing CGI scripts that
  create the code on-the-fly (i.e., web programs
  that create web pages). As such, a WYSIWYG
  program cannot help us.
• Code bloat. These programs often create
  unnecessary and confusing code if you revise your
  pages or make changes.

5
EditPlus

• Although there are good reasons not to use
  WYSIWYG programs, there are good reasons to use
  programs that will make HTML coding easier for
  you.
• The perks of EditPlus (http//www.editplus.com/)
• Free trial version
• Works in a lot like MS Word (e.g., buttons for
  placing text in bold), but creates the HTML code
  for you rather than doing so in the background.
• Built-in browser so you can see what your code
  looks like as you write it
• Color-coding
• Spell checking

6
(No Transcript)
7

• Lets begin . . .

8

• Live examples of creating HTML code using
  EditPlus. Review use of text, basic formatting
  (bold, italics), line breaks, colors. Inserting
  images, links, and sound files. Using CSS to
  format things in a global fashion.

9
HTML Tags

• HTML web pages are based on a combination of text
  and tags.
• Tags are programming commands used to modify the
  contents of a web page. They are used, for
  example, to change the color of the text, the
  size of the text, insert images, etc.
• Example and
• Most (but not all) tags have an opening and
  closing tag. The opening tag is used to tell
  the browser that a new command is coming and the
  closing tag tells the browser that the command is
  complete.

10
HTML Tags

• The most basic tag is the HTML tag. This is used
  so the browser will know that the content to
  follow is HTML code/content. (Most browsers
  assume this by default even without the use of
  the HTML tag.)

11
HTML Tags

• Any text that is placed in-between these tags
  will be rendered by the browser.
• Try this example.
• The purpose of this experiment is to learn more
  about the way people understand others.

12
HTML Tags - Bold

• Text can be formatted in ways that you would
  normally do so in a program like MS Word.
• To set something in bold, use the tags
  and include the piece to be set in bold
  in-between.
• Try this example.
• The purpose of this experiment is to learn more
  about the way people understand
  machines.

13
HTML Tags - Italics

• Italics work in the same way. The HTML tags for
  setting text in italics is and
• Try this example.
• Although the average score in this sample is
  4.23, your score was 6.32.

14
Font size and color

• To set the font face, use the
  tags.
• Note The font tag is the first of several tags
  we will discuss that have attributes. For
  example, when setting the font, you can adjust
  the face, the size, and the color. The examples
  will make this clear.
• Welcome to our lab web page!

15
Font size and color

• Another example.
• Personality Research Lab
• Welcome to our lab web page!

16
Line spacing

• In HTML, carriage returns are not coded as line
  breaks. You can use them all you wish to format
  your file, but the presence of a return in the
  code will not affect the rendering of the text.
• To insert a line break, you must include a tag
  for it.
• The line break tag is
  . There is no closing
  tag.

17
Line spacing

• Try this example.
• Personality Research Lab
• 
  
  
• Welcome to our lab web page!

18
Blank Spaces

• Blank spaces work in a similar way Any space
  (greater than 1) that exists in the HTML code
  will not be rendered.
• If you want a sequence of blank spaces (e.g., for
  minor indenting), you have to include them
  explicitly.
• The command is nbsp
• (Notice that this is not a tag per se, but it is
  still an HTML command. Nbsp stands for
  Non-Breaking Space.)

19
Blank spaces

• Try this example.
• Factor 1
  
• nbsp nbsp joy
  
• nbsp nbsp happy
  
• Factor 2
  
• nbsp nbsp sad
  
• nbsp nbsp shame
  

20
Centering Text

• To center text, use the and
  tags
• Try this example.
• Personality Research Lab
• 
  
  
• The purpose of this experiment is to learn more
  about the way people understand others.

21
Creating Links

• A link is a portion of the page that, when
  clicked, automatically transports the user to a
  new page.
• HTML code
• click here to go to
  Google
• Note The A stands for anchor. The HREF
  attribute is the URL for the page you want the
  user to go to when the link is clicked. The text
  in between the two tags will be what the user
  sees as the link.

22
Creating Links

• Please note that, when the link leads to an
  external site (i.e., not your own), you need to
  include the full URL with the http portion.
• If the link leads to another webpage on your site
  that is located in the same directory (e.g.,
  www), you only need to include the file name.
• Example
• click here to go to the next
  page
• Use this method whenever you can because it will
  make it easier for you to transfer files from one
  server or directory to another without rewriting
  the URL for all your links.

23
Tables

• Tables are a valuable way to organize the
  placement of text on a web page.
• A few important things to know about the way
  table code is processed by browsers.
• - Row by row
• -Left to right

24
Tables

• Any text that is placed in-between these tags
  will be rendered by the browser.
• Try this example.

25
Tables

• The and tags are used to denote a new
  Table Row.

26
Tables

• The tags are used to denote a cell
  within a row. Any text that is placed in-between
  these tags will be rendered within that cell in
  the table.
• cell 1
• cell 2

27
Tables

• A table with two rows.
• cell 1
• cell 2
• cell 3
• cell 4

28
Tables

• Modifying table attributes
• cell 1
• cell 2
• cell 3
• cell 4

29
Tables

• Modifying table attributes
• cell 1
• cell 2
• cell 3
• cell 4

30
Tables

• Please note that formatting needs to be applied
  within each cell. (A pain. Ill show you a way
  around this later.)
• cell 1
• cell 2
• cell 3
• cell 4

31
Tables

• You can span across columns using the COLSPAN
  attribute.
• Means
• Group 1
• Group 2

32
Tables

• Any text that is placed in-between these tags
  will be rendered by the browser. Try this
  example.
• cell 1
• cell 2
• cell 3
• cell 4

33
Cascading Style Sheets (CSS)

• One of the cumbersome aspects of formatting text
  in classic HTML is the sheer number of tags
  required to do so. If you choose to change the
  style of your web page after a period of time,
  all of the code needs to be rewritten.
• This is especially inconvenient when working with
  tables because the text has to be formatted
  separately within each cell.
• CSS provides a means for separating style from
  content and is an efficient way to add pizzazz
  (not pizza) and personality to your web pages.

34
CSS

• Any text that is placed in-between these tags
  will be rendered by the browser. Try this
  example.
• body
• color white
• background gray
• font-family verdana
• font-size 14
• line-height 2
• Welcome to my web page!

35

• You can define classes so that different
  portions of your content are styled differently.

36

• body
• color white
• background gray
• font-family verdana
• font-size 14
• line-height 2
• .td1
• border-style solid
• border-left-width 1px
• border-right-width 1px
• border-top-width 1px
• border-bottom-width 1px
• border-color black
• background white

37
CSS

• Adjusting the way in which links behave.
• alink color blue
• avisited color navy
• aactive color pink
• ahover color red background-color blue
• Welcome to my web page!
  
• click here to go to
  Google

38
Transferring your web page to the web server

• Save your file with the .htm extension.
  Example mypage.htm
• Go to the Netfirms web page and login to your
  account.
• Go to the File Manager.
• Click the www folder to open your www directory
  (i.e., the directory where your web pages will
  reside)
• Click the upload button.
• Find mypage.htm on your computer using the
  browse option.
• Upload the file.

39
Viewing your webpage

• You should now be able to see your web page on
  the live Internet.
• URL http//mysite.netfirms.com/mypage.htm
• Important note You will be tempted to simply
  click on the link for your file from within the
  Netfirms File Manager. Dont do it! It will not
  open your file naturally it will try to open it
  in a secure way, which may cause your file to
  display improperly. To view your file, type the
  URL directly into the address bar in a separate
  browser window. As you make changes and
  trasnsfer the new file, youll need to REFRESH
  (F5) the screen to see the changes take effect.

40

• Notes about revising your page.

41
Images

• You can use tags that enable images to be
  displayed on your web page.
• Here is the basic code
• ext2.gif width240 height240 altmain graphic

42

• Notice that there are several attributes that can
  be varied width, height, and alt (i.e., the
  text that appears when you hover your mouse over
  the graphic).
• As with links, your URL can be absolute (i.e.,
  including the full URL address for the image) or
  relative (i.e., just the file name, assuming the
  graphic file is in the same directory as the page
  calling it).

43
Images

• If the image were in the same directory
• altmain graphic
• Images as background (http//www.w3schools.com/css
  /css_background.asp)
• body
• background-image url('nauttext2.gif')

44
Images

• Using an image as a link
• altgoto google

45
Image Cautions

• Things people do wrong when working with images
• 1. They do not have the image file in the same
  directory as the web page that is displaying it.
• 2. If they are using DreamWeaver, DreamWeaver has
  assumed that, since the image was on the C drive
  of the users computer, the web page code should
  try to pull the image of the users computer.
  This wont work when the page goes live.
• 3. People sometimes use images that are too big
  and resize them downward. Large image files take
  a long time to download even if they are
  displayed using smaller dimensions.