xhtml – notes from a dummy like me

8/3/2019 XHTML – Notes from a dummy like me

http://slidepdf.com/reader/full/xhtml-notes-from-a-dummy-like-me 1/38

2012

XHTML – Notes from a

dummy like me :)By: TatiCarpio.com

Think before you print. Let us save the mother earth.

10/01/2012



XHTML – Notes from a dummy like me :)

She work as a Technical Support, geek, nerd, occasional photographer, rock-star-wanna-be,food devotee and serial tinkerer. Loves to blog and not a writer. She moves like a jagger ☺

The purpose of this document is to share with you (readers) the knowledge that I got from other

people who freely share their know-how in the internet. I’d like to thank Bucky from

www.thenewboston.org and www.w3schools.com who shared their knowledge to people like us who’s

brain are hungry for Information Technology. Visit Bucky’s website and watch his video tutorials.

Easier to follow and understand. It was executed nicely (meaning it’s not boring). Now, I don’t want

to waste your time, let’s go to the main dish.

Gears that you need for this tutorial are:

Computer , laptop or desktop really doesn’t matter. iPad is not really advisable, you need lots of coding

to do.

Operating system, I assume you have Microsoft Windows. I love Mac or Apple products, but they are

expensive.

Browser , I prefer Chrome. If you like Internet Explorer, install the latest version (as of today it is

version 8).

What is XHTML?

According to our good friend Wikipedia, XHTML (eXtensible Hypertext Markup Language) is a family of

XML, markup languages that mirror or extend versions of widely-used HTML (Hypertext Markup

Language), the language in which web pages are written. I will not go into details, you can freely read

more in Wikipedia.




She work as a Technical Support, geek, nerd, occasional photographer, rock-star-wanna-be,food devotee and serial tinkerer. Loves to blog and not a writer. She moves like a jagger☺

1. Download and install the Text Editor.

Do we really need the text editor? Yes! We will be using text editor in this tutorial. 99 point 99

percent to be exact.

Can I use the Windows’ notepad? Yes, you can. But the text editor that I will be using is more user

friendly than the one in Windows. Don’t blame me, if you feel uneasy with your choice.

What is text editor? Again, according to Wikipedia,a text editor is a type of program used for editing

plain text files. Text editors are often provided with operating systems or software development

packages, and can be used to change configuration files and programming language source code. So

on and so forth. Read the rest in Wikipedia.

Visit http://notepad-plus-plus.org (I assume, you know how to browse);

Click Download;

Choose Notepad++ v5.9.6.2 Installer (that’s the latest as of this date. If there’s a latest version,

choose that instead).

This will download npp5.9.6.2.installer.exe file to your computer.

Save it to your local drive and folder (your choice);

Double click that frog.

Click Run.

Choose English.





Click Next.

Click I Agree.

You really don’t have to read that. It’s going to

waste your time. There’s a lot of reading to do inthis tutorial.

Click Next.

I prefer to use that location or the default

location. Btw, the location might change,depending on your Windows version. But hey, Isuggest to use the default.

Click Next.

You really don’t have to change anything in this

part. The default settings are already good.

Click Install.

You don’t have to choose anything here. Unless

you want to choose “Create shortcut on Desktop”.

Just watch and sing La La La La… Congratulations! You’ve just installed your future.





2. Creating First Webpage.

So now, open your Notepad++. The one you installed, remember? See point 1. Else, open your

windows’ Notepad. In this tutorial, I will be using Notepad++, no offense, ok?

Type the codes as shown below into your Notepad++ (the exact/same characters, ok). I know you

wish to copy & paste those codes, to make coding-life easier. But hey, coding needs a lot of typing, so

have patience. Practice makes it perfect. Typing those codes makes you memorize the commands by

heart. Make sure you have the right spelling, commands, punctuation and special characters.





Create a folder in your desktop. Example, XHTML and save your first code as index.html.

Index.html is the main name or something like the homepage.

In the above image, I named it, based on my choice.

I know, I know, you want to see how it looks like in the browser? Right click the file index.html.

And here how it looks like, just a white background and the title “Maria Carpio is Cool!”. Why?

Because we haven’t put any text yet in the <body> of the index.html. Have patience, my friend, we

will get in there.

Explanation in layman’s term:

<!doctype html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is the very first command in your html document

before <html> tag. It simply tells the browser to whichversion of HTML the page is written.

Do I really need that? Yes. Always add the<!doctype….> declaration to any HTML documents, sobrowser knows what type of document to expect. Hehates surprises.





<html>

</html>

This tells the browser that this is an HTML document,bugger ☺ And I am about to make a website.

Take note of the symbol “ / “ or forward slash. That

way, it tells the browser that this is the end of the

HTML document.<head>

</head>

This is where all the technical explanation resides. Allthat crap in other words.

Again, see the “ / “ or forward slash. It tells the

browser that, that is the end of the crap.

<title>

</title>

The title of the document. Pretty much straight

forward.

End of the title. Remember the “ / “ or forward slash.

<body>

</body>

Almost all the contents of an HTML document, like text,

hyperlinks, images, tables, lists, etc, resides here.

“ / “ or forward slash, tells the browser that, that is theend contents.





3. Body and Headers.

To create the body of the website, it will be outside of the </head>. And headers are something

useful if you need to give emphasis into your webpage.





Look at the title. See the headers and sizes. The body part is just normal.


<h1> </h1>

<h2> </h2><h3> </h3><h4> </h4><h5> </h5>

<h6> </h6>

Bold bigger title. Ending tag is always with “ / “ or forward slash.

<body>

</body>

<body> </body>

Almost all the contents of an HTML document, like text, hyperlinks, images,tables, lists, etc, resides here.

“ / “ or forward slash, tells the browser that, that is the end contents.





4. Paragraphs and Line Breaks.

Now, let’s learn about paragraphs and line breaks. If you don’t know what paragraph is, then, I don’t

know what else to say. Line break, you really don’t need a beginning or an end. It is pretty much the

next line.

See line 11 and 12.

I didn’t put any tags in it. It simply tells the browser that, nothing more and nothing less. You’ll see

the output in the next image.






<p>

</p>

Paragraph. Separates the sentences with a space between.

End of paragraph

<br /> Separate the sentences but without the space between.





5. Horizontal, Bold, Italics and Comments.

You can take a break first, before you proceed. I don’t want to receive hate mail.

<hr /> horizontal is the line that split paragraphs in between and it tells the visitorthat “oh, ok, this is one section and this is the other.” That makes sense.

<strong>

</strong>

Bold doesn’t mean nudity. Bold is making text or paragraph bold. It’sredundant. Just see the commands, I’m lost already.

End of bold.

<em>

</em>

Em means, emphasis and in an easy layman’s term it is Italics. It simply

makes the letters’ tilt.

End of italics.



Comments are notes that don’t show up to the website. Most of the webdeveloper used this comments, to remind them, when they changed it orwhat they changed in the tags.

This is very useful if you have a big web developer team.






<a></a>

It means anchor and the dumbest naming ever. I really don’t know whythey have to name it “<a>” if they can name it as “<L>” since it is a link.

href Hyperlink Reference. href is an attribute and it tells the tag what it needs

in order to work.

Please take note of the quotations or special characters. If you miss asingle quote, the way you want to see it in the browser is different.

7. Creating a link within a Webpage.

This is very interesting. So pay attention to this. Lesson # 7, you really don’t need to scroll down to

look for something within a website. You can actually click the link and it jumps on the topic. It is

simply a destination. Normally, you’ll see this option used in FAQs. I just copied and pasted the FAQ’sfrom the Dubai-US embassy website, since I recently visited their website on how to apply for tourist

visa.





8. Email Links and Tool Tips.

Honestly, I don’t like email links. First, it’s too old school. Second, when you click on the email link it

opens “outlook” or any email application installed in your computer. It’s annoying. I still prefer the

modern style, which is, taticarpio75 [at] aim [dot]com. I really don’t have to explain it further,

but, that is an obvious email address already, you just need to tweak the [at] and the [dot] to

something like @ and . But still, I will show you this stupid email link tag ☺ Tool tips, just simply

hover the mouse to the link and a message comes up.





When I clicked on the “Email Link to Maria Carpio”, it pops up the outlook or email application installed

in my PC. I told you.

But when I clicked hover my mouse to “Tool Tips”, it shows “best search engine”. Try it, and you’ll

have fun.


<a href=”mailto:”>

</a>

Another attribute added to <a> family. Just make sure you have thecorrect punctuation in order to make it work.

End of tag.

<a title=”>

</a>

Title or the tool tips. I don’t have to explain it further, I think I already did.

End of tag.





9. Adding Images to the webpage.

Now we are covering on how to add images to your webpage. This is very useful, because without

images on your website it looks dumb. Make sure to add an image to the folder where the index.html

is saved. C’mon now, don’t stare at your computer☺





There you go, you saw 2 dumb pictures ever! If you’ve followed the tags and punctuation correctly,you’ll have the same screen as I am, but with different image though. There are 2 things we did in

this picture.


<img src=”” /> Img means image and src is source. Pretty straight forward.

<img src="taticarpio-small.jpg"/> This tag simply added the images, that’sthe first one.

<a href="http://taticarpio.blogspot.com"><img src="taticarpio-small.jpg"/></a>

And here, I added the <a> tag to put a link into our image. In my case, if I click on the second image it link me up to my blog site.

Go ahead try it out. In fact, in this lesson, you can incorporate the other tags that we already tackled,

you just have to start playing around.





10. Resizing Images.

Here, you need to learn to resize an image so it fit well in your webpage. So, look for bigger image in

your hard drive and save it to the folder where index.html is located. If you don’t have, try to contactour best friend www.google.com.

OMG! You couldn’t even recognize me and you have to scroll up and sideways to view the image.





To shrink the image, let’s tweak our code. Another attribute called height.


<img src=”” height=””/> The height will shrink the big image.

Whenever you resize your image this way, it doesn’t mean that the loading speed will be faster. It





doesn’t work like that. The browser is loading the big image and shrinking it. To make your website

faster, change the image file size or pixel size. You can use Microsoft Picture Manager (for example).

11. Tables.

The easiest way to learn Tables are to follow whatever you see in the below image.






<table>

</table>

Table, this will provide the row and the column.

<table border=””> Border as the attribute. It provided those borders or lines betweenthose words. See the image above. You can change number according

to your choice of thickness.

<tr>

</tr>

I think this is table row.

End of table row.

<td>

</td>

This is table data.

End of tag.

Based on our previous topics you can change the Banana, apple, etc by adding images. You just have

to start using your imagination on how to do that. I suggest that you try it, so you know if you have

some problems from the previous topics. Then email me or comment in my blog and let’s work it out.





12. Table headers.

Table header is something like a title in your table. Tired already? Relax for awhile and come back

later. Remember, you’re the future Web Developer!






<th>

</th>

The table header. Basically, is the title in your tables. The fonts arebold and centered.

End of tag.





13. ColSpan.

Now we are going to add another attribute for the table header and that is colspan or column span. It

tells the browser on how many columns to use.






<th colspan=””>

</th>

It expands the column depending on your choice. In my sample, I

used 2.

End of tag.





14. Table width, cellpadding, and cellspacing.

Another attribute in <table> is width. Width makes you control your choice of how wide you want it.

Take note that I used 500 pixels in my example below.





You can also use percentage. See below image. The percentage sign below looks funny though.

Refresh your browser and adjust the browser by dragging it to smaller and wider size. You’ll see what

I mean.





Cellpadding gives space between the borders.





Cellspacing is a space between the cells.






<table width=””> Width makes allows you to control your choice of how wide you want

those borders. You can use either pixels or percentage. I suggest youtry it and see the difference.

<table cellpadding=””> Cellpadding gives space between the borders and the text.

<table cellspacing=””> Cellspacing is the space between the cells. It’s like making the border

thicker.

</table> End of tag.

Don’t give up! I promise you, that this is the last topic for XHTML.





15. List.

There are 2 types of lists, unordered and ordered list.





<ul>

</ul>

Unordered list is just a bunch of bullet points.

End of tag.

<li>

</li>

Lists of things or text you want to add.

End of tag.

<ol>

</ol>

Ordered list, it appears with numbers. Most of the time they use this,when they have to make step-by-step instructions.

End of tag.

Congratulations! You’ve just finished your XHTML tutorial. Those are the basics and there are more

tags and attributes that you can add up to your website. Remember, always lean on to our friend Mr.

www.google.com

Visit my blog at http://www.taticarpio.com

Follow me on: http://twitter.com/dailyblah

Why not make a video tutorial? I have a bad accent. But don’t make me wrong, I know English.

Obviously, you’ve read this tutorial. I may have grammar errors, but I already warned you on each

page of this tutorial. Read the footer.

If you don’t have internet connection, just save this file to your hard disk and follow the tutorial while

you are disconnected in the World Wide Web.

xhtml – notes from a dummy like me

Documents