SlideShare a Scribd company logo

Creating WebPages using HTML

Download as PPT, PDF
Mohammad Arshad
Mohammad Arshad

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.

Education
1 of 58
Downloaded 71 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
Web Design : Creating Web Pages Using HTML Mohammad Arshad 1
Mohammad Arshad 2
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
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
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
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
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
Activity 1 Read these introductions to HTML What is HTML? – http://www.w3schools.com Introduction to HTML – http://www.htmlgoodies.com Mohammad Arshad 8
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
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
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
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
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
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
What are the basic HTML tags? <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> <H3> Objectives</H3> Mohammad Arshad 15
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
What are the basic HTML tags? <CENTER> <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> </CENTER> <H3> Objectives</H3> Mohammad Arshad 17
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
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
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
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
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
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
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
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
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
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>
<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?
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
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
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?
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?
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?
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>
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
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
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
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
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
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
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
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
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
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
How to add images <IMG src=“mylogo.gif”> <CENTER> <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> </CENTER> Mohammad Arshad 45
How to add images <CENTER> <IMG src=“mylogo.gif”> <H1> My Library </H1> <H2> Mission, Vision and Goals </H2> </CENTER> Mohammad Arshad 46
How to add images <IMG src=“mylogo.gif” align=left> Mohammad Arshad 47
How to add images <IMG src=“mylogo.gif” width=100 height=100 align=left alt=logo> Mohammad Arshad 48
How to add images <BODY bgcolor=“#000800” background=marb.jpg > Mohammad Arshad 49
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
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
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
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
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
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
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
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
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

More Related Content

What's hot (20)

PPT
Html
Bhumika Ratan
 
PPTX
Css Complete Notes
EPAM Systems
 
PPT
google search engine
way2go
 
PPT
static dynamic html tags
teach4uin
 
PPTX
Basic HTML
Sayan De
 
PPTX
MS PUBLISHER- Basic Parts and Functions.pptx
JasmineDelaCruzParat
 
PPTX
Working with files and folders 2016
Social Development Centre Waterloo Region
 
DOCX
Introduction to gui based operating system
Jaydip Kayal
 
PPTX
Html list
sayed fathey
 
PPT
Web browser
Hardik Kakadiya
 
DOC
Introduction to MS WORD
Muhammad Irfan
 
PPTX
Lecture 2 introduction to html
palhaftab
 
PPT
Part 2 desktop and start menu
Government of India
 
PPTX
Ordered lists
Toni Norman
 
PPTX
Internet Grade 6
ninoallandanganancarpio
 
PPTX
Slideshare ppt
jhannnii
 
PPTX
The internet
Kumod Shirkande
 
PPTX
HTML5- Create divisions in a web page
Grayzon Gonzales, LPT
 
PPTX
World Wide Web (WWW)
Pramod Kshirsagar
 
PPTX
Browsers and search engines
kavithaJayalal
 
Html
Bhumika Ratan
 
Css Complete Notes
EPAM Systems
 
google search engine
way2go
 
static dynamic html tags
teach4uin
 
Basic HTML
Sayan De
 
MS PUBLISHER- Basic Parts and Functions.pptx
JasmineDelaCruzParat
 
Working with files and folders 2016
Social Development Centre Waterloo Region
 
Introduction to gui based operating system
Jaydip Kayal
 
Html list
sayed fathey
 
Web browser
Hardik Kakadiya
 
Introduction to MS WORD
Muhammad Irfan
 
Lecture 2 introduction to html
palhaftab
 
Part 2 desktop and start menu
Government of India
 
Ordered lists
Toni Norman
 
Internet Grade 6
ninoallandanganancarpio
 
Slideshare ppt
jhannnii
 
The internet
Kumod Shirkande
 
HTML5- Create divisions in a web page
Grayzon Gonzales, LPT
 
World Wide Web (WWW)
Pramod Kshirsagar
 
Browsers and search engines
kavithaJayalal
 

Viewers also liked (20)

PPTX
Beenish
Beenish Iqbal
 
PDF
58199main exploring.the.moon
Sérgio Sacani
 
PDF
Catálogo SOL'S Atelier52.pt
João Simões
 
PPTX
Women enpowerment.pptx11111111111
1988_24
 
PPT
зно з іноземних мов 2011
Ruslana Shamanska
 
PDF
KNOW THE LEDGE EMPOWERMENT
Phillip Moreland El
 
PDF
Impact investing - profit meets purpose
Dmitry Tseitlin
 
PDF
Email Etiquettes 20111203
Velpha Chemicals
 
PDF
Sai baba message to humanity
rajuramakrishna
 
PPT
Fwd: FW: TQM
Shoaib Anjum
 
XLS
Taller de ofimatica excel(1)
JOHANAYSOLEY
 
PDF
Seminar brochure1113
Tariq Mahmood
 
PPTX
Genre research mediaaaaaaaa
pinsentf
 
PPS
Goddess Nicole Marie Lentz9
hunter69
 
PDF
She camel of allah1
Mohammad Shamsul Hoque Siddique
 
TXT
Polycarbonate ใส
Wrought Thai
 
PDF
Numerical analysis m5 l2slides
SHAMJITH KM
 
DOCX
Reference - Gordon Donkin
Melanie Rana
 
RTF
Api 510-closed-2
Tariq Mahmood
 
DOCX
Advanced Contemporary Affairs By: M Imtiaz Shahid Contents Book 91
M Imtiaz Shahid
 
Beenish
Beenish Iqbal
 
58199main exploring.the.moon
Sérgio Sacani
 
Catálogo SOL'S Atelier52.pt
João Simões
 
Women enpowerment.pptx11111111111
1988_24
 
зно з іноземних мов 2011
Ruslana Shamanska
 
KNOW THE LEDGE EMPOWERMENT
Phillip Moreland El
 
Impact investing - profit meets purpose
Dmitry Tseitlin
 
Email Etiquettes 20111203
Velpha Chemicals
 
Sai baba message to humanity
rajuramakrishna
 
Fwd: FW: TQM
Shoaib Anjum
 
Taller de ofimatica excel(1)
JOHANAYSOLEY
 
Seminar brochure1113
Tariq Mahmood
 
Genre research mediaaaaaaaa
pinsentf
 
Goddess Nicole Marie Lentz9
hunter69
 
She camel of allah1
Mohammad Shamsul Hoque Siddique
 
Polycarbonate ใส
Wrought Thai
 
Numerical analysis m5 l2slides
SHAMJITH KM
 
Reference - Gordon Donkin
Melanie Rana
 
Api 510-closed-2
Tariq Mahmood
 
Advanced Contemporary Affairs By: M Imtiaz Shahid Contents Book 91
M Imtiaz Shahid
 
Ad

Similar to Creating WebPages using HTML (20)

PPT
Webpage design lesson3
Maria Stella Solon
 
PPT
Introduction to html
Arthur Arturo Artur
 
PPTX
Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx
pirode9160
 
PPT
Web page
mafiavish
 
PPT
BasicHTML
rcsampang
 
PPT
Uta005 lecture2
vinay arora
 
PDF
HTML-Part1
Ahmed Saihood
 
PPT
Html
SBalan Balan
 
DOCX
Learn HTML and know that you don.docx
Surendra Gusain
 
PPTX
Grade 6-Hyper Text Markup Language .pptx
dilumariyajoseph
 
PPTX
L03-HTML_CSS Web design and Development.pptx
samuelasefa9
 
PPTX
Xhtml and html5 basics
messinam
 
PPTX
This slides helps a lot to learn about html tags.
Bangladesh Army University of Engineering and Technology
 
PPT
Introduction of HTML Language for Basics.ppt
LareebMoeen1
 
PPT
Html book2
Diksha Garg
 
PPTX
Database System Html Basics Complete Topic.pptx
rockysaad553
 
PDF
Wp unit 1 (1)
Bhavsingh Maloth
 
PPTX
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
ManuAbraham17
 
PDF
Introduction to HTML
Seble Nigussie
 
PDF
Unit 2 (it workshop)
Dr.Lokesh Gagnani
 
Webpage design lesson3
Maria Stella Solon
 
Introduction to html
Arthur Arturo Artur
 
Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx
pirode9160
 
Web page
mafiavish
 
BasicHTML
rcsampang
 
Uta005 lecture2
vinay arora
 
HTML-Part1
Ahmed Saihood
 
Html
SBalan Balan
 
Learn HTML and know that you don.docx
Surendra Gusain
 
Grade 6-Hyper Text Markup Language .pptx
dilumariyajoseph
 
L03-HTML_CSS Web design and Development.pptx
samuelasefa9
 
Xhtml and html5 basics
messinam
 
This slides helps a lot to learn about html tags.
Bangladesh Army University of Engineering and Technology
 
Introduction of HTML Language for Basics.ppt
LareebMoeen1
 
Html book2
Diksha Garg
 
Database System Html Basics Complete Topic.pptx
rockysaad553
 
Wp unit 1 (1)
Bhavsingh Maloth
 
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
ManuAbraham17
 
Introduction to HTML
Seble Nigussie
 
Unit 2 (it workshop)
Dr.Lokesh Gagnani
 
Ad

Recently uploaded (20)

PPTX
PPT-Q1-WEEK-3-SCIENCE-ERevised Matatag Grade 3.pptx
reijhongidayawan02
 
PDF
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
PPTX
HUMAN RESOURCE MANAGEMENT: RECRUITMENT, SELECTION, PLACEMENT, DEPLOYMENT, TRA...
PRADEEP ABOTHU
 
PPTX
Cultivation practice of Litchi in Nepal.pptx
UmeshTimilsina1
 
PPTX
I AM MALALA The Girl Who Stood Up for Education and was Shot by the Taliban...
Beena E S
 
PPTX
How to Handle Salesperson Commision in Odoo 18 Sales
Celine George
 
PPTX
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
PPT
Talk on Critical Theory, Part One, Philosophy of Social Sciences
Soraj Hongladarom
 
PPTX
Neurodivergent Friendly Schools - Slides from training session
Pooky Knightsmith
 
PPTX
Post Dated Cheque(PDC) Management in Odoo 18
Celine George
 
PDF
Knee Extensor Mechanism Injuries - Orthopedic Radiologic Imaging
Sean M. Fox
 
PDF
Chapter-V-DED-Entrepreneurship: Institutions Facilitating Entrepreneurship
Dayanand Huded
 
PPTX
How to Convert an Opportunity into a Quotation in Odoo 18 CRM
Celine George
 
PPTX
How to Set Up Tags in Odoo 18 - Odoo Slides
Celine George
 
PPT
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
PPTX
Growth and development and milestones, factors
BHUVANESHWARI BADIGER
 
PPTX
How to Manage Large Scrollbar in Odoo 18 POS
Celine George
 
PDF
ARAL-Orientation_Morning-Session_Day-11.pdf
JoelVilloso1
 
PDF
ARAL_Orientation_Day-2-Sessions_ARAL-Readung ARAL-Mathematics ARAL-Sciencev2.pdf
JoelVilloso1
 
PPTX
QUARTER 1 WEEK 2 PLOT, POV AND CONFLICTS
KynaParas
 
PPT-Q1-WEEK-3-SCIENCE-ERevised Matatag Grade 3.pptx
reijhongidayawan02
 
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
HUMAN RESOURCE MANAGEMENT: RECRUITMENT, SELECTION, PLACEMENT, DEPLOYMENT, TRA...
PRADEEP ABOTHU
 
Cultivation practice of Litchi in Nepal.pptx
UmeshTimilsina1
 
I AM MALALA The Girl Who Stood Up for Education and was Shot by the Taliban...
Beena E S
 
How to Handle Salesperson Commision in Odoo 18 Sales
Celine George
 
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
Talk on Critical Theory, Part One, Philosophy of Social Sciences
Soraj Hongladarom
 
Neurodivergent Friendly Schools - Slides from training session
Pooky Knightsmith
 
Post Dated Cheque(PDC) Management in Odoo 18
Celine George
 
Knee Extensor Mechanism Injuries - Orthopedic Radiologic Imaging
Sean M. Fox
 
Chapter-V-DED-Entrepreneurship: Institutions Facilitating Entrepreneurship
Dayanand Huded
 
How to Convert an Opportunity into a Quotation in Odoo 18 CRM
Celine George
 
How to Set Up Tags in Odoo 18 - Odoo Slides
Celine George
 
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
Growth and development and milestones, factors
BHUVANESHWARI BADIGER
 
How to Manage Large Scrollbar in Odoo 18 POS
Celine George
 
ARAL-Orientation_Morning-Session_Day-11.pdf
JoelVilloso1
 
ARAL_Orientation_Day-2-Sessions_ARAL-Readung ARAL-Mathematics ARAL-Sciencev2.pdf
JoelVilloso1
 
QUARTER 1 WEEK 2 PLOT, POV AND CONFLICTS
KynaParas
 

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”> [email protected] </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 &amp;lt;BODY&amp;gt; tag.
  • #20: Emphasize that all information that should be displayed on the browser should be inserted in the start and closing of the &amp;lt;BODY&amp;gt; tag.
  • #21: Emphasize that all information that should be displayed on the browser should be inserted in the start and closing of the &amp;lt;BODY&amp;gt; tag.