Creating WebPages using HTML
Download as PPT, PDF3 likes2,073 views
The document discusses how to create web pages using HTML. It begins with an introduction to HTML, describing it as the standard markup language used to define the structure of web pages. It then covers the basic HTML tags needed to build a basic page structure, including tags for headings, paragraphs, lists, and links. It also discusses how to format text and add color to web pages using HTML tags. The document provides examples and exercises for learners to create their own basic HTML pages.
![What is HTML?
HTML Standards
HTML 4.01 specification defines the
HyperText Markup Language (HTML)
“In addition to the text, multimedia, and
hyperlink features of the previous versions
of HTML (HTML 3.2 [HTML32] and HTML 2.0
[RFC1866]), HTML 4 supports more
multimedia options, scripting languages,
style sheets, better printing facilities, and
documents that are more accessible to
users with disabilities.” (W3C)
Mohammad Arshad 7](https://image.slidesharecdn.com/htmlslides-140907074058-phpapp02/85/Creating-WebPages-using-HTML-7-320.jpg)
![What are the basic
HTML tags?
<HTML> [identifies the document as HTML]
<HEAD>
<TITLE>My Library</TITLE>
</HEAD>
Contains
information
about the
HTML
<BODY> document
<P>Content of My Library’s Web Page</P>
</BODY> Contains all information displayed on the
</HTML> [ closing tag ]
These tags generally define the basic
structure of a web page
Mohammad Arshad 12
browser](https://image.slidesharecdn.com/htmlslides-140907074058-phpapp02/85/Creating-WebPages-using-HTML-12-320.jpg)
Creating WebPages using HTML
- 1. Web Design : Creating Web Pages Using HTML Mohammad Arshad 1
- 3. Scope What is HTML? What are the tools needed for creating web pages using HTML? What are the basic HTML tags? How to create a web page using HTML? How to build a web site using HTML? Mohammad Arshad 3
- 4. Learning outcomes Define what is HTML Determine the basic tools for creating web pages using HTML Use basic HTML coding and tags Use HTML to create web pages Build a web site using HTML Mohammad Arshad 4
- 5. 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 Mohammad Arshad 5
- 6. What is HTML? Web Standards The W3C (World Wide Web Consortium) develops specifications, (called “Recommendations") guidelines, as well as software and tools that enhance interoperability between web browsers, servers, and other web-enabling technologies. Their recommendations on Web technologies and protocols like HTML, CSS, XHTML, XML, and HTTP are considered the Web standards The HTML 4.01 specification from W3C is the latest HTML standard supported by new browsers Mohammad Arshad 6
- 7. What is HTML? HTML Standards HTML 4.01 specification defines the HyperText Markup Language (HTML) “In addition to the text, multimedia, and hyperlink features of the previous versions of HTML (HTML 3.2 [HTML32] and HTML 2.0 [RFC1866]), HTML 4 supports more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities.” (W3C) Mohammad Arshad 7
- 8. Activity 1 Read these introductions to HTML What is HTML? – http://www.w3schools.com Introduction to HTML – http://www.htmlgoodies.com Mohammad Arshad 8
- 9. What are the basic tools? 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 From the Library Mohammad Arshad 9
- 10. 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 Mohammad Arshad 10
- 11. What are the basic HTML rules? Tags are not case sensitive but are usually written in uppercase, with the attributes and values in small letters enclosed by quotation marks Most tags have optional attributes with several possible values that modify the tag’s behavior Look inside HTML element (Tag) TAG attribute value closing tag <BODY bgcolor="#FFFFFF" text="#000066"> … <BODY> Mohammad Arshad 11
- 12. What are the basic HTML tags? <HTML> [identifies the document as HTML] <HEAD> <TITLE>My Library</TITLE> </HEAD> Contains information about the HTML <BODY> document <P>Content of My Library’s Web Page</P> </BODY> Contains all information displayed on the </HTML> [ closing tag ] These tags generally define the basic structure of a web page Mohammad Arshad 12 browser
- 13. What are the basic HTML tags? The basic HTML tags above (written using Notepad and saved with a file extension .htm) create a simple web page shown beside it. Mohammad Arshad 13
- 14. What are the basic HTML tags? Header tags range from<H1> to <H6>, <H1> the largest and <H6> is the smallest. The headings’ size shows the hierarchy of importance on the page’s layout. <H1> My Library </H1> (page title) <H2> Mission, Vision and Goals </H2> (main topic) <H3> Objectives</H3> (subtopic) Mohammad Arshad 14
- 15. What are the basic HTML tags? <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> <H3> Objectives</H3> Mohammad Arshad 15
- 16. What are the basic HTML tags? Use <CENTER> tag to center elements on the page <CENTER> <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> </CENTER> <H3> Objectives</H3> Mohammad Arshad 16
- 17. What are the basic HTML tags? <CENTER> <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> </CENTER> <H3> Objectives</H3> Mohammad Arshad 17
- 18. What are the basic HTML tags? The <P> tag breaks the textual information on a page and inserts a single line space, which is useful for defining and separating paragraphs. <H2> Mission, Vision and Goals </H2> <P> MyLibrary aims to be the country's public virtual library with state-of-the art resources and associated services, accessible to anyone, anytime, anywhere. </P> Mohammad Arshad 18
- 19. What are the basic HTML tags? <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> Mohammad Arshad 19
- 20. What are the basic HTML tags? Use the align attribute of the <P> tag to justify the paragraph: center, right or left. (left is the default) <P align=center> 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> Mohammad Arshad 20
- 21. HTML basic tags Format text with tags that make the text bold <B> and/or italic <I> to put emphasis on some points <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> Mohammad Arshad 21
- 22. HTML basic tags Tags can be nested as long as the first tag open is the last tag closed with and end tag. <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> Mohammad Arshad 22
- 23. What are the basic HTML tags? Break tag <BR> forces line breaks without creating a vertical space, which should be used only for reasons of design or content <H3> Library Hours </H3> <P> Monday – Friday </BR> 8:00 a.m. – 5:00 p.m. <P> <P> *Open on Holidays </P> Mohammad Arshad 23
- 24. What are the basic HTML tags? <H3> Library Hours </H3> <P> Monday – Friday </BR> 8:00 a.m. – 5:00 p.m. <P> <P> *Open on Holidays </P> Mohammad Arshad 24
- 25. What are the basic HTML tags? 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 <HR width=50% size=3 align=center> Mohammad Arshad 25
- 26. Exercise 1 Create a new folder in C: directory and name the folder with your name or student Id Open NotePad or any text editor Use the basic tags discussed to create a basic web page about your library, mission, vision and goals, history, collections, services, etc. ( Supply the necessary tags in the appropriate place.) Save the file as about.html in the created directory c:your folder Test / View / Edit using your browser Mohammad Arshad 26
- 27. What are other HTML formatting tags? 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 <H3> Objectives </H3> <UL><LI> Acquire a comprehensive collection of multimedia materials</LI> <LI> Develop appropriate user education and training packages</LI> Mohammad Arshad 27 </UL>
- 28. <H3> Objectives </H3> <UL><LI> Acquire a comprehensive collection of multimedia materials</LI> <LI> Develop appropriate user education and training packages</LI> Mohammad Arshad 28 </UL> What are other HTML formatting tags?
- 29. What are other HTML formatting tags? Ordered list is a numbered list that uses <OL> and <LI> tags <H3> Library Resources </H3> <OL> <LI> Library Collections </LI> <LI> Library Catalog </LI> <LI> Electronic Resources </LI> </OL> Mohammad Arshad 29
- 30. What are other HTML formatting tags? <H3> Library Resources </H3> <OL> <LI> Library Collections </LI> <LI> Library Catalog </LI> <LI> Electronic Resources </LI> </OL> Mohammad Arshad 30
- 31. Lists can be nested, one within another <OL> <LI> Library Collections </LI> <UL> <LI> Books </LI> <LI> Journals </LI> Mohammad Arshad 31 </UL> <LI> Library Catalog </LI> <LI> Electronic Resources </LI> <UL> <LI> CD-ROMs </LI> <LI> Abstracts & Indexes </LI> </UL> </OL> What are other HTML formatting tags?
- 32. Mohammad Arshad 32 <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> What are other HTML formatting tags?
- 33. The list item type attribute can be used to change the bullets in <UL> disc, square or circle, and in <OL> from number 1 to lowercase (a) or uppercase (A) letters, or lowercase (i) or uppercase (I) roman numerals <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> Mohammad Arshad 33 </OL> What are other HTML formatting tags?
- 34. What are other HTML formatting tags? Mohammad Arshad 34 <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>
- 35. What are other HTML formatting tags? Definition list allows listing of terms and definitions. Uses <DL>, <DT> for the term and <DD> for definition. <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> Mohammad Arshad 35
- 36. What are other HTML formatting tags? <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> Mohammad Arshad 36
- 37. Exercise 2 Create two more web pages, about your library collections and library services (one web page for each) using the list tags and other tags discussed earlier. Save and name them accordingly, collection.html and services.html, in the created directory c:your folder Test / View / Edit using your browser Always save file after editing before viewing the page Mohammad Arshad 37
- 38. How to add color 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 Mohammad Arshad 38
- 39. How to add color < BODY bgcolor=“#ffffff” text=“#000000” link=“#0000cc” vlink=“#00ff00” alink=“#ff0000” > 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 Mohammad Arshad 39
- 40. How to add color < BODY bgcolor=“#8A2BE 2” text=“#ffffff” link=“#0000ff” vlink=“#00ff00” alink=“#ff0000” > < BODY bgcolor=“green” text=“white” link=“#ffffff” vlink=“#00ff00” alink=“#ff0000” > Mohammad Arshad 40
- 41. How to add color Color attribute of <FONT> tag sets the color of selected text within the page overriding the text attribute on the <BODY> tag. <CENTER> <FONT color=“#000000"><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> Mohammad Arshad 41
- 42. How to add color <CENTER> <FONT color=“#000000"><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> Mohammad Arshad 42
- 43. Exercise 3 Edit the web pages you have created, you should have three by now: about.htm, collections.htm and services.htm Add color to your page Consult with an HTML reference book or the Internet for the hexadecimal color codes you can use to add color Test / View / Edit / Save in the created directory c:your Folder Mohammad Arshad 43
- 44. How to add images Image and other graphical elements can be added on the web page through the <IMG> tag using the src (source) attribute that points to the image / graphics < IMG src=“mylogo.gif” > Mohammad Arshad 44
- 45. How to add images <IMG src=“mylogo.gif”> <CENTER> <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> </CENTER> Mohammad Arshad 45
- 46. How to add images <CENTER> <IMG src=“mylogo.gif”> <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> </CENTER> Mohammad Arshad 46
- 47. How to add images <IMG src=“mylogo.gif” align=left> Mohammad Arshad 47
- 48. How to add images <IMG src=“mylogo.gif” width=100 height=100 align=left alt=logo> Mohammad Arshad 48
- 49. How to add images <BODY bgcolor=“#000800” background=marb.jpg > Mohammad Arshad 49
- 50. Exercise 4 Insert images on your web pages Test / View / Edit using your browser and Notepad Always save them after editing Respect copyright of materials, use original or free graphical materials for your web pages Mohammad Arshad 50
- 51. How to create hyperlinks 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) <A HREF=“collection.htm”>Library Collection</A> <A HREF= “http://www.unesco.org/webworld/portal_bib/”> UNESCO Libraries Portal </A> Mohammad Arshad 51
- 52. How to create hyperlinks <A HREF=“collection.htm”> Library Collection</A> <A HREF= “http://www.unesco.org/ webworld/portal_bib/”> UNESCO Libraries Portal </A> Mohammad Arshad 52
- 53. How to create hyperlinks Hyperlinks are also used to connect to graphic and other media Icons and other graphic elements can be used as the the “trigger’ (object) users click on to jump to the referred document <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> Mohammad Arshad 53
- 54. How to create 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> Mohammad Arshad 54
- 55. How to create hyperlinks Link to e-mail address can be created to automatically open the e-mail program on the system supplying the address Contact <A HREF=“mailto:me@mylibrary”> me@mylibrary.edu </A> Mohammad Arshad 55
- 56. Exercise 5 Create a new web page that will serve as your library’s home page Name it as index.html Create links to the other web pages you have created Create a link back to index.html on the other web pages Place contact information at the bottom of each page (e-mail, tel no#, etc) Add more elements, pictures etc… View / Test the links / Edit and save Mohammad Arshad 56
- 57. Activity 2 Read the following articles Dave Raggett. Getting started with HTML – http://www.w3.org/MarkUp/Guide/ Selena Sol. Introduction to Web Design – http://www.wdvl.com/Authoring/HTML/Tut orial/ NCSA: A Beginner's Guide to HTML – http://archive.ncsa.uiuc.edu/General/Inter net/WWW/HTMLPrimerAll.html Mohammad Arshad 57
- 58. Activity 3.2 Submit electronic copies of the web pages created using the lesson: about.htm, collections.htm, services.htm and index.htm. The links on the web pages should be working. Mohammad Arshad 58
Editor's Notes
- #19: Emphasize that all information that should be displayed on the browser should be inserted in the start and closing of the &lt;BODY&gt; tag.
- #20: Emphasize that all information that should be displayed on the browser should be inserted in the start and closing of the &lt;BODY&gt; tag.
- #21: Emphasize that all information that should be displayed on the browser should be inserted in the start and closing of the &lt;BODY&gt; tag.