Scribd
Upload
4 views34 pages

Hhtmllesson 1

Uploaded by

hatixhe bilibashi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
4 views34 pages

Hhtmllesson 1

Uploaded by

hatixhe bilibashi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

HTML Leksion 1

Objektivat
 Në përfundim

Identifikon kodin

Njohje me taget HTML :
<HTML></HTML><HEAD></HEAD><TITLE></TITLE>
<BODY></BODY><B></B><I></I><HR><BR><IMG...>
<P></P><UL></LI></UL>, links,header sizes

Përpunimi I informacionit text dhe grafik

Krijon web të thjeshtë

Shfaqja e web page në browser

Referohuni literaturave në HTML
HTML?
 HTML - HyperText Markup Language
 Bashkësi instruksionesh pas çdo faqeje
web (source)
 HTML “tags” I tregon browserit si do të
shfaqet përmbajtja e një web
 <B> Ndërtimi i faqes web </B>
HTML?
 HTML “tags” < >
 Brenda< > vendosen instruksionet <B>
bold
 Tags hapës dhe mbyllës
 <B> </B>
Struktura në HTML
 HEAD dhe BODY.
 Të gjitha faqet kanë këtë standart:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Struktura në HTML
 HEAD përmban informacion rreth faqes.
 Titulli Faqja e pare

 Shembull:
<HEAD>
<TITLE>Faqja e pare</TITLE>
</HEAD>
 BODY te gjitha instruksionet.
 Perfshin tags per tekstin, grafiket, link, tabelat
dhe funskione te tjera
Tekst-Tags
 <P> </P>
 <BR> (“line break”) Enter
 <B> </B>
 <I> </I>
 <U> </U>
 Shembull:

<B>This is bold text.</B> This is bold text.

<I>Here is italics.</I> Here is italics.

<B><I>Both!</I></B> Both!
Tekst-Tags
 Madhesia e tekstit
 <H1> </H1>

Shembull: <H1>MY PAGE</H1> shfaq MY
PAGE
 <H6>MY PAGE</H6> shfaq MY PAGE
Tekst-Tags
 <CENTER> </CENTER>
 Shembull:
<CENTER>
<H1>TRAJNIMET</H1>
</CENTER>

Shfaqet…

TRAJNIMET
Lines
 horizontal lines per ndarje faqesh
 <HR>
 Shembull:

<HR> {one pixel thick, 100% of window}

<HR SIZE=4 WIDTH=50%>
{4 pixels thick, 50% of window}
IMAGE Tags
 The <IMG> tag is used to display graphics
on web pages.
 The main requirement for the IMG tag is
the file name (“source”) of the image.
 NOTE: Web page images DO NOT
become part of a web page file. They are
separate files and must be located in the
same folder as the web page file unless
otherwise noted.
IMAGE Tags
 An example of an IMG tag that displays a
graphic called ME.JPG
<IMG SRC=“ME.JPG”>
 In the example above, the name (“source” or
SRC) of the picture file is ME.JPG (stored in the
same folder as the web page file).
 NOTE: The image file’s name must be exactly
as stored (upper/lower case, etc.)
 .JPG and .GIF indicate types of images
appropriate for web pages. Web graphics will be
discussed in more detail in a later lesson.
Lists
 Many web pages contain lists, much like
you see in this PowerPoint presentation.
 Lists can be “unordered” (using bullets like
this list) or “ordered” (with numbers or
letters).
 <UL> </UL> indicates an unordered
(bulleted) list.
 <OL> </OL> indicates an ordered list.
 <LI> </LI> is used for each list item.
List Examples
These tags… Produce this list…
 <UL> • Dogs
 <LI>Dogs</LI> • Cats
 <LI>Cats</LI> • Lizards
 <LI>Lizards</LI>
 </UL>
List Examples
These tags… Produce this list…
 <OL> 1. Dogs
 <LI>Dogs</LI> 2. Cats
 <LI>Cats</LI> 3. Lizards
 <LI>Lizards</LI>
 </OL>
List Examples
These tags… Produce this list…
 <OL TYPE=“A”> A. Dogs
 <LI>Dogs</LI> B. Cats
 <LI>Cats</LI> C. Lizards
 <LI>Lizards</LI>
 </OL>
A Word about Links
 You will find out much more about links in a
later lesson, but for now, I want you to be
able to recognize links.
 All links use the tag that begins <A HREF=
 The A stands for “anchor” (think of an anchor
chain..it’s made of links…right?).
 The HREF part will be the name of a web
page or a web address.
A Word about Links
 Here are a couple of examples, you will see
the actual message to click on between the
“A” tags.
 This link shows the words Go Back and
sends the user to a page called
HOME.HTM that is stored in the same
folder as the current page.
<A HREF=“HOME.HTM”>Go Back</A>
A Word about Links
 This link shows the words
More Info and
sends the user to the CSUDH College of
Education home page.
<A HREF=“http://www.csudh.edu/coe/”>More
Info</A>
 As you complete the activities on the last
slide, look for link tags (as well as other
tags).
Self Check - HTML Lesson 1
 Which of the following is NOT a required
tag?

<HTML>

</BODY>

<H1>

<HEAD>
Self Check - HTML Lesson 1
 Which of the following is NOT a required
tag?

<HTML>

</BODY>

<H1> {headings/headlines are common, but not required}

<HEAD>
Self Check - HTML Lesson 1
 Which of the tags below will show the words
MY PAGE on the page in very large type?

<TITLE>MY PAGE</TITLE>

<H1>MY PAGE</H1>

<H7>MY PAGE</H7>

<FONT SIZE=2>MY PAGE</FONT>
Self Check - HTML Lesson 1
 Which of the tags below will show the words
MY PAGE on the page in very large type?

<TITLE>MY PAGE</TITLE>

<H1>MY PAGE</H1> {H1 shows the largest “headline”}

<H7>MY PAGE</H7>

<FONT SIZE=2>MY PAGE</FONT>
Self Check - HTML Lesson 1
 Which set of tags below would display this
text in italics and bold: CLICK HERE

<I><B>CLICK HERE</I></B>

<I><B>CLICK HERE</B></I>

<B>CLICK HERE</B>

<H1>CLICK HERE</H1>
Self Check - HTML Lesson 1
 Which set of tags below would display this
text in italics and bold: CLICK HERE

<I><B>CLICK HERE</I></B>

<I><B>CLICK HERE</B></I> *

<B>CLICK HERE</B>

<H1>CLICK HERE</H1>

*Explanation: Tags must be “nested” - the first


to be turned on must be the last to be turned
off.
Self Check - HTML Lesson 1
 To put a blank line after typing…

<BR>

<P> and </P>

Just press Return/Enter

Either <BR> or <P></P> will work.
Self Check - HTML Lesson 1
 To put a blank line after typing…

<BR>

<P> and </P>

Just press Return/Enter

Either <BR> or <P></P> will work.
Self Check - HTML Lesson 1
 Which the the following makes a
“numbered” list (1., 2., etc.)?
 <OL></OL>
 <LI></LI>
 <UL></UL>
 <NL></NL>
Self Check - HTML Lesson 1
 Which the the following makes a
“numbered” list (1., 2., etc.)?
 <OL></OL> {a numbered list is an “ordered” list}
 <LI></LI>
 <UL></UL>
 <NL></NL>
Self Check - HTML Lesson 1
 To draw a line across the web page, use…

<HR>

<LINE>

<LI></LI>

Must use a graphic.
Self Check - HTML Lesson 1
 To draw a line across the web page, use…

<HR> {a line is a “horizontal rule”}

<LINE>

<LI></LI>

Must use a graphic.
Self Check - HTML Lesson 1
 Which of the following displays the words
CLICK ME as a link to homepage.htm?

<LI “homepage.htm”>CLICK ME</LI>

<LI “CLICK ME”>homepage.htm

<A HREF=”homepage.htm”>CLICK ME</A>

<LINKTO “homepage.htm”>CLICK ME
Self Check - HTML Lesson 1
 Which of the following displays the words
CLICK ME as a link to homepage.htm?

<LI “homepage.htm”>CLICK ME</LI>

<LI “CLICK ME”>homepage.htm

<A HREF=”homepage.htm”>CLICK ME</A>

<LINKTO “homepage.htm”>CLICK ME
Activities
 Check out the handout at
http://www.csudh.edu/fisher/tbe540/HHO1.
htm
(as a review of this lesson).
 Try the hands-on exercise at
http://www.csudh.edu/fisher/tbe540/HEX1.
htm

You might also like