BasicHTML
Upcoming SlideShare
Loading in...5
×
 

BasicHTML

on

  • 3,420 views

Lecture on Web page creation using HTML

Lecture on Web page creation using HTML

Statistics

Views

Total Views
3,420
Views on SlideShare
3,379
Embed Views
41

Actions

Likes
6
Downloads
250
Comments
0

5 Embeds 41

http://46hinternational.blogspot.com 14
http://vineelakodali.blogspot.com 12
http://www.universita.com.br 11
http://localhost 3
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

BasicHTML BasicHTML Presentation Transcript

  • Creating Web Pages Using HTML and other Tools Ramon C. Sampang
  • Creating Web Pages Using HTML
    • Learning outcomes
    • Define what is HTML
    • Familiarize with basic HTML coding and tags
    • Use HTML and other basic tools to create web pages
    • Build a web site using HTML
  • What is HTML?
    • HyperText Markup Language (HTML)
    • the publishing language of the World Wide Web; the standard used to create web pages
    • markup language that defines the structure of information by using a variety of tags and attributes, which is designed to display text and other information on a screen and provide hyperlinks to other Web documents
  • What are the basic requirements?
    • Plain text editor like NotePad – to write HTML documents
    • Web browser – to test and view the created web page
    • HTML reference book – to serve as guide for HTML tags
    • Information and other materials – i.e. about the library in electronic file
    • Other utility software (i.e. browser, graphic editor, FTP client, etc.)
    • knowledge of content; creativity; time; patience and determination
  • What are the basic HTML rules?
    • HTML tags are enclosed by brackets < > for example <html>
    • Most tags require a closing tag <html> … </html>
    • Tags must be nested correctly <b><i>My Library Web Site</i></b> first tag on, last tag off
    • HTML treats all white space as a single blank space
  • What are the basic HTML rules?
    • Tags have several optional attributes with different possible values that modify the tag’s behavior
        • Read any HTML Reference book to know all the tags, their attributes and possible values
    <body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000066&quot;> … <body> tag attribute value closing tag Look inside HTML element (Tag)
    • These tags define the basic structure of a web page
    • <html>
    • <head>
    • <title>My Library</title>
    • </head>
    • <body>
    • <p>Content of My Library’s Web Page</p>
    • </body>
    • </html>
    What are the basic HTML tags?
    • <html> [identifies the document as HTML]
    What are the basic HTML tags? <head> <title>My Library</title> </head> Contains information about the HTML document <body> <p>Content of My Library’s Web Page</p> </body> Contains all information displayed on the browser </html> [ closing tag ]
    • The basic HTML tags above (written using Notepad and saved with a file extension .htm) create a simple web page shown beside it.
    What are the basic HTML tags?
  • Hands on!
    • Create your own basic web page
    • View it using your browser
    • Edit/debug the source code using Notepad
  • Exercise 1 – Basic HTML structure
    • Create a new folder C:website
    • Open NotePad or other text editor
    • Start creating your web page by defining the basic structure of a HTML document (html, head and body tags) by typing the following codes into your text document:
      • <html>
      • <head>
      • <title>My Library</title>
      • </head>
      • <body>
      • <p>Content of My Library’s Web Page</p>
      • </body>
      • </html>
    • Save as All files (*.*) and with the .htm extension added to the file name (template.htm)
  • Exercise 1 – Basic HTML structure
    • Test / View using your browser
    • Edit and debug your HTML codes
    • Save your file
    • Refresh or reload your browser then view your web page
    • *always save your source file whenever there is a change and refresh/reload your browser to see the change
    • * copy and paste the information if they are already in electronic form
    • Define Headings on a page using Header tags
    • Add content (text) through paragraph tags
    • Align headings and paragraphs using the align attribute
    • Make the text Bold, Italic or Underlined
    Basic HTML tags [structure]
  • Basic HTML tags [structure]
    • <h1> </h1> Creates the largest headline
    • <h6> </h6> Creates the smallest headline
    • <p> Creates a new paragraph
    • <p align=“”> Aligns a paragraph to the left, right, or center
    • <div align=“”> A generic tag used to format large blocks of HTML; also used for stylesheets
    • <b> </b> Creates bold text
    • <i> </i> Creates italic text
    • Header tags range from<h1> to <h6> - mark the text as headings
    • <h1> is the the largest and <h6> is the smallest.
    • You always need the opening tag in front of your content, followed by the closing tag at the end of the content, as in the following example:
      • <h1> This is the page title </h1>
    • The headings’ size shows the hierarchy of importance on the page’s layout.
    • Usually used for the page title, subtitles and to divide the web page into several section
    Basic HTML tags [structure]
  • Exercise 2 - Header Tags
    • Open template.htm and save as about.htm
    • Use these tags in your web page
    • <h1> My Library </h1>
    • <h2> Mission, Vision and Goals </h2>
    • <h3> Objectives</h3>
    • 2. Save then view your page (about.htm)
    • 3. Change the text used as headings (change “My Library” to name of your library) or divide your page to different sections using appropriate headings
    • Web browsers wrap lines and ignore carriage returns, so you must use <p> tags to prevent browsers from running all your text content together.
    • The <p> tag separate your text content into paragraphs by inserting a white space between lines in between two or more paragraphs and/or in between paragraphs and other page elements
    • You always need the opening tag in front of your paragraph content, followed by the closing tag at the end of the content
      • <p> MyLibrary aims to be the country's public virtual library with state-of-the art resources and user-friendly services, available to anyone, anytime, anywhere. </p>
    Basic HTML tags [structure]
  • Exercise 3 - Paragraph Tag
    • Insert the following text in your basic page:
      • <p> MyLibrary aims to be the country's public virtual library with state-of-the art resources and associated services, available to anyone, anytime, anywhere. </p>
    • Save and view your page
    • Change the content of the paragraph placing appropriate information about your library
    • Use the align attribute to define the justification of your headings, paragraphs and other elements on the page: center, right or left. (left is the default)
      • <h1 align=“center”> My Library </h1>
      • <h2 align=“center”> Mission, Vision and Goals </h2>
      • <h3> Objectives</h3>
      • <p align=center> MyLibrary aims to be the country's public virtual library with state-of-the art resources and user friendly services, available to anyone, anytime, anywhere. </p>
    Exercise 4 – align attribute
    • Format text with tags that make the text bold <b> and/or italic <i> to put emphasis on some points
    • Try it on the content of your page
    Exercise 5 - Bold, Italic or Underlined <p> <b> MyLibrary </b> aims to be the country's <i> public virtual library </I> with state-of-the art resources and associated services, available to anyone, anytime, anywhere. </p>
    • Tags can be nested as long as the first tag open is the last tag closed with and end tag.
    • Exercise 5 - Try it on the content of your page
    Exercise 5 - Bold, Italic or Underlined <p> <b> MyLibrary </b> aims to be the country's <b> <i> public virtual library </i> </b> with state-of-the art resources and associated services, available to anyone, anytime, anywhere. </p>
    • Create a page layout using basic HTML tags
    • Use Break tag <br> to force line breaks
    • Insert a horizontal bar to separate major sections of the page using Horizontal rule <hr> tag
    • Use <pre> tag to create a pre-defined layout on your page
    • Organize information using Lists: ordered lists, unordered lists, definition list
    Page layout using HTML
  • Break Tag
    • Break tag <br> forces line breaks without creating a vertical space, which should be used only for reasons of design or content
    • Create a new document by opening template.htm and save as libinfo.htm
    • Encode this on the newly created page - libinfo.htm
    <h3> Library Hours </h3> <p> Monday – Friday <br> 8:00 a.m. – 5:00 p.m. </p> <p> *Open on Holidays </p>
    • Horizontal rule <hr> tag separate major sections of the page by inserting a bar in between paragraphs or sections
    • Using one or more of its attributes could vary its appearance
    • Use <hr> tag to divide the page into sections
    Horizontal rule tag < hr width=“50%” size=“3” align=“center” >
    • HTML also supports lists; unordered lists, ordered lists and, definition list, which is sometimes the best way to present information
    • Unordered list is a bulleted list that uses <ul> and <li> tags
    Lists <h3> Objectives </h3> <ul><li> Acquire a comprehensive collection of multimedia materials</li> <li> Develop appropriate user education and training packages</li> </ul>
    • Unordered list is a bulleted list that uses <ul> and <li> tags
    Unordered Lists <h3> Objectives </h3> <ul><li> Acquire a comprehensive collection of multimedia materials</li> <li> Develop appropriate user education and training packages</li> </ul>
    • Ordered list is a numbered list that uses <ol> and <li> tags
    Ordered Lists <h3> Library Resources </h3> <ol> <li> Library Collections </li> <li> Library Catalog </li> <li> Electronic Resources </liI> </ol>
    • Lists can be nested, one within another
    Nested Lists <ol> <li> Library Collections </li> <ul> <li> Books </li> <li> Journals </li> </ul> <li> Library Catalog </li> <li> Electronic Resources </li> <ul> <li> CD-ROMs </li> <li> Abstracts & Indexes </li> </ul> </ol>
    • The list item type attribute can be used to change the bullets in <ul> disc, square or circle, and in <ol> from arabic number (1), to small letters alphabet (a), or uppercase (A), roman numerals (I), or small letters (i)
    Lists item type attribute <ol type=I> <li> Library Collections </li> <ul type=square> <li> Books </li> <li> Journals </li> </ul> <li> Library Catalog </li> <li> Electronic Resources </li> <ul type=disc> <li> CD-ROMs </li> <li>Abstracts & Indexes</li> </ul> </ol>
  • Nested Lists with different item types <ol type=I> <li> Library Collections </li> <ul type=square> <li> Books </li> <li> Journals </li> </ul> <li> Library Catalog </li> <li> Electronic Resources </li> <ul type=disc> <li> CD-ROMs </li> <li>Abstracts & Indexes</li> </ul> </ol>
    • Definition list allows listing of terms and definitions. Uses <DL>, <DT> for the term and <DD> for definition.
    Definition Lists <dl> <dt> Definition Term </dt> <dd> Definition </dd> <dt> Membership Card </dt> <dd> Users of the library must present their membership card to avail of the library services and privileges. </dd> </dl>
    • Change font color
    • Change background color
    • Insert images and/or graphics
    • Use image as background
    Color, image, and other elements
  •  
    • The color of the background and text elements of the web page can vary using attributes of the <body> and <font> tag
    • To specify color, HTML uses the color names (16 colors supported by most browsers), or the numerical equivalent in RGB hexadecimal codes that correspond to over 14 million possible color, shades, hues and tints
      • White #ffffff Black #000000 Blue #0000ff
      • Red #ff0000 Yellow #ffff00 Green #00800
    Background color
    • bgcolor sets the background color of the whole page
    • text defines the text color for the page
    • link - unvisited link color
    • vlink - visited link color
    • alink - activated link color
    Exercise 6 – change background color < body bgcolor=“#ffffff” text=“#000000” link=“#0000cc” vlink=“#00ff00” alink=“#ff0000” >
  • Exercise 6 – change background color < body bgcolor=“#8A2BE2” text=“#ffffff” link=“#0000ff” vlink=“#00ff00” alink=“#ff0000” > < body bgcolor=“green” text=“white” link=“#ffffff” vlink=“#00ff00” alink=“#ff0000” >
  • Font Tags *
    • <font color=&quot; &quot;> Sets the font color, using name or hex value e.g. blue /
    • <font face=&quot; &quot;> Sets the font face eg. Arial
    • <font size=&quot;1&quot;> Sets the font size 1 (smallest) to 7 (largest)
    • <font size=&quot;+2&quot;> (+/-) font size change with respect to the text preceding it
    • <font point-size=&quot; &quot;> (Netscape Navigator)
    • *Use style sheet (CSS) for more control
    • Color attribute of <font> tag sets the color of selected text within the page overriding the text attribute on the <body> tag.
    Font color <center> <font color=“#000000&quot;><h1> My Library </h1> </font> <h2> Mission, Vision and Goals </h2></CENTER> <font color=“#ffff00”> <p> <b> MyLibrary </b> aims to be the country's <b> <i> public virtual library </i> </b> with state-of-the art resources and associated services, available to anyone, anytime, anywhere. </p> </font>
  • Exercise 7 - Change font color <center> <font color=“#000000&quot;><h1> My Library </h1> </font> <h2> Mission, Vision and Goals </h2></CENTER> <font color=“#ffff00”> <p> <b> MyLibrary </b> aims to be the country's <b> <i> public virtual library </i> </b> with state-of-the art resources and associated services, available to anyone, anytime, anywhere. </p> </font>
  • Images/graphics on the web page
    • <img src=&quot;name&quot;> Adds an image
    • <img src=&quot;name&quot; align=?> Aligns an image: left, right, center, bottom, top, middle
    • <img src=&quot;name&quot; border=?> Sets size of border around an image
    • Image tag insert images and other graphical elements on a web page following this format:
    • <img src=“imagefilename”>
    • specifying the image or graphic to be used
    • For Example :
    • I want to use this image of my logo
    • I will use the tag below
    Images/graphics on the web page < img src=“mylogo.gif” >
  • Exercise 8 – Insert image <img src=“mylogo.gif”> <h1 align=“center”> My Library </h1> <h2 align=“center”> Mission, Vision and Goals </h2> </center> <img src=“mylogo.gif” align=left>
    • Image tags also have attributes that you can use, such as width , height , border , align , and valign .
    • The width and height attributes specify the size of your image for the Web browser to interpret
    • you can set the border width to 0 or above (images display a border by default when used as links).
    • The align and valign attributes set alignment of your image: align (for horizontal alignment) can be set to left , right , or center , and valign (vertical alignment) can be set to top , bottom , or middle .
    • Alt tag – provide a textual information about the image
    Images/graphics on the web page
  • Exercise 9 – Insert image <img src=“mylogo.gif” width=“100” height=“100” border=“0”align=“left” alt=“logo”>
  • Exercise 10 - Use image as background <body bgcolor=“#000800” background=marb.jpg > Respect copyright of materials, use original or free images/graphics on your web page
  • Build a Web site – linking web pages
  • Hyperlinks – linking web pages
    • <a href=&quot;URL&quot;></a> Creates a hyperlink
    • <a href=&quot;mailto:EMAIL&quot;></a> Creates a mailto link
    • <a name=&quot;NAME&quot;></a> Creates a target location within a document
    • <a href=&quot;#NAME&quot;></a> Links to that target location from elsewhere in the document
    • Hypertext links are created on web pages using the <a> anchor tag with the HREF (Hypertext Reference) attribute
    • Hyperlinks connect your web pages together and point to other web documents (build your web site)
    • You can use a relative URL or absolute URL
    Hyperlinks – linking web pages Relative URL <a href=“collection.htm”>Library Collection</a> Absolute URL <a href= “http:// www.unesco.org/webworld/portal_bib/ ”> UNESCO Libraries Portal </a>
  • Exercise 11 – Hyperlinks <a href=“collection.htm”> Library Collection</a> <a href= “http:// www.unesco.org/webworld/portal_bib/ ”> UNESCO Libraries Portal </a>
    • Hyperlinks are also used to connect not only to documents and images but also to different media types and applications services
    • Text, icons and other graphical elements can be used as the “trigger’ -object users click on to jump to the referred document or services
    Hyperlinks – linking web pages <a href=“mylibrary.jpg”> MyLibrary </a> <a href “mylibrary.jpg”> <img src “mylibrary_sm.jpg”> </a> <a href “mylibrary.jpg” border=0> <img src “mylibrary_sm.jpg”> </a>
  • Exercise 12 – Hyperlinks <a href=“mylibrary.jpg”> MyLibrary </a> <a href =“mylibrary.jpg”> <img src=“mylibrary_sm.jpg”> </a> <a href=“mylibrary.jpg”> <img src=“mylibrary_sm.jpg” border=0> </a>
    • Link to e-mail address can be created to automatically open the e-mail program on the system supplying the linked e-mail address
    Hyperlinks – linking web pages Contact <a href=“mailto:me@mylibrary”> me@mylibrary.edu </a>
  • Add more content and other elements to your page
    • Dave Raggett. Getting started with HTML
      • http://www.w3.org/MarkUp/Guide/
    • Selena Sol. Introduction to Web Design
      • http://www.wdvl.com/Authoring/HTML/Tutorial/
    • NCSA: A Beginner's Guide to HTML
      • http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
    • Writing for the Web: A Primer for Librarians
      • http://bones.med.ohio-state.edu/eric/papers/
      • primer/toc.html