Your SlideShare is downloading. ×
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
BasicHTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

BasicHTML

2,428

Published on

Lecture on Web page creation using HTML

Lecture on Web page creation using HTML

Published in: Business, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,428
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
254
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Creating Web Pages Using HTML and other Tools Ramon C. Sampang
    • 2. 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
    • 3. 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
    • 4. 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
    • 5. 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
    • 6. 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)
    • 7.
      • 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?
    • 8.
      • <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 ]
    • 9.
      • 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?
    • 10. Hands on!
      • Create your own basic web page
      • View it using your browser
      • Edit/debug the source code using Notepad
    • 11. 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)
    • 12. 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
    • 13.
      • 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]
    • 14. 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
    • 15.
      • 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]
    • 16. 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
    • 17.
      • 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]
    • 18. 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
    • 19.
      • 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
    • 20.
      • 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>
    • 21.
      • 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>
    • 22.
      • 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
    • 23. 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>
    • 24.
      • 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” >
    • 25.
      • 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>
    • 26.
      • 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>
    • 27.
      • 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>
    • 28.
      • 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>
    • 29.
      • 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>
    • 30. 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>
    • 31.
      • 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>
    • 32.
      • Change font color
      • Change background color
      • Insert images and/or graphics
      • Use image as background
      Color, image, and other elements
    • 33.  
    • 34.
      • 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
    • 35.
      • 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” >
    • 36. 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” >
    • 37. 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
    • 38.
      • 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>
    • 39. 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>
    • 40. 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
    • 41.
      • 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” >
    • 42. 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>
    • 43.
      • 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
    • 44. Exercise 9 – Insert image <img src=“mylogo.gif” width=“100” height=“100” border=“0”align=“left” alt=“logo”>
    • 45. 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
    • 46. Build a Web site – linking web pages
    • 47. 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
    • 48.
      • 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>
    • 49. Exercise 11 – Hyperlinks <a href=“collection.htm”> Library Collection</a> <a href= “http:// www.unesco.org/webworld/portal_bib/ ”> UNESCO Libraries Portal </a>
    • 50.
      • 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>
    • 51. 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>
    • 52.
      • 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>
    • 53. Add more content and other elements to your page
    • 54.
      • 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

    ×