pdfencryptor.encrypt itextsharp c# : Change font size pdf form reader software application project winforms html .net UWP html_tutorial0-part1143

How the Web Works, Part I: Introduction to HTML 
1 
HTML Tutorial 
(version 5.0)
This tutorial is designed to teach you some the basics of HyperText Markup Language (HTML), 
with an emphasis on transforming a word-processing document into a simple Web page. 
You can get the most recent version of this tutorial from the CAT website: 
h
tt
p
://
ca
t.
xu
l
a
.
e
du
/t
u
t
o
ri
a
ls/ 
Contents 
This tutorial will guide you through the following steps: 
1.  Retrieving the necessary materials from the Web 
2.  Copying text from a word-processing document and pasting it into an HTML template 
3.  Marking block elements and validating your work  
4.  Marking inline elements and validating your work 
5.  Using Netscape Composer 
6.  Using Word's "Save as HTML" feature. 
7.  Uploading your files to the Web server 
Prerequisites 
This tutorial assumes a level of competency with basic computing tasks and concepts.  You should 
understand the following terms: 
v
Files 
v
Folders 
v
File hierarchy 
v
The desktop 
v
The Finder (Mac only) 
Conventions 
Actions that you need to perform are bulleted, like this: 
·  Open the file. 
Menu commands look like this: File > Open.  This means choose the Open option from the File 
menu.  Sometimes, for the sake of brevity, common menu items may be referred to simply as 
Save or Open.  The same style is used for other user interface elements, such as key you're 
supposed to press and buttons you're supposed to click, i.e. "Click the OK button." 
HTML code and URLs look like this: 
<BODY
BGCOLOR=
"
wh
it
e"
>
Names of files and folders, as well as text that you are supposed to type, are rendered in italics.  
Change font size pdf form reader - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
exporting data from pdf to excel; how to flatten a pdf form in reader
Change font size pdf form reader - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
how to save editable pdf form in reader; exporting data from excel to pdf form
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
Before You Begin 
·  Look over the "Hypertext Markup Procedure" and "30-Odd Safe HTML Elements" quick 
reference sheets.  Re-examine the handouts on "Anatomy of a Web Page" and the 
"Container Model." 
·  Read the following information about filename extensions. 
About Filename Extensions 
Some operating systems use filename extensions to identify different types of files.  For example, 
a file named document.htm  or document.html is marked as a Web page.  A file named 
document.gif is marked as a particular type of image file, while document.jpg indicates an image 
file of another format.  A Microsoft Word document might be named document.doc, whereas a 
plain text file would most likely be named something like document.txt. 
Web servers, which may run on a number of different operating systems, use filename extensions 
to identify file types. 
The Microsoft Disk Operating System (MS-DOS) uses filename extensions.  Windows uses them 
too, since it is built "on top of" MS-DOS.  Windows is often configured to hide filename 
extensions, so that you may not be aware of them.  (But see below for the remedy.) 
The Mac OS doesn't use filename extensions.  A very different system is employed to identify 
different file types, so that a file named document could be almost anything -- text, graphics, 
audio, video, whatever.  Mac users who want to publish on the Web or share files with Windows 
users need to be aware of filename extensions and start using them correctly. 
Examples of Common Filename Extension Problems 
v
You find a file named document.html.txt.  Which is it — plain text or hypertext? 
v
You create a web page that is supposed to display an image.  The image file is named 
picture.jpg but you mistakenly set the SRC attribute of the IMG tag to point to picture.gif.  
The image does not appear. 
v
You're a Windows user.  A Mac user sends you e-mail with a Word document attached.  It 
is named Final Report.  You can't open it.  Because Final Report has no filename 
extension, the Windows operating system can't identify it as a Word file.  If the Mac user 
had named the file Final Report.doc, this would not have occurred.  Also note that it's 
good practice to avoid spaces and case variations in filenames if you plan to share them 
over the Web, so an even better name would be final_report.doc , final-report.doc  or 
finalreport.doc
Windows Only: Configure Your System 
Follow these instructions to make Windows display filename extensions at all times.  This is 
highly recommended for aspiring Web authors, because it reduces opportunities for confusion. 
· WinXP: From the Start menu, choose Control Panel, then double-click on Folder 
Options.  (In older versions of Windows, Open any folder or drive.  From the View menu, 
choose Options or Folder Options.) 
·  A dialog box should appear.  Click the View tab. 
·  Look for an option that says "Hide file extensions for known file types" or "Hide MS-DOS 
file extensions for file types that are registered."  Make sure this item is not checked. 
·  Click the button marked OK. 
C# PDF File Compress Library: Compress reduce PDF size in C#.net
can help to reduce PDF file size effectively. RasterEdge.Imaging.Font.dll. ops.MonochromeImageOptions.TargetResolution = 150F; // to change image compression
extract data from pdf form; collect data from pdf forms
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
can help to reduce PDF file size effectively Reduce font resources: Font resources will also take up too TargetResolution = 150.0F 'to change image compression
exporting pdf data to excel; extract data from pdf using java
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
1.  Retrieve Materials 
First you must create a folder to hold your files. 
·  Create a new folder on the desktop and name it tutorial. 
Windows users:
You can do this quite simply by clicking on the desktop with your right 
mouse button and choosing New > Folder from the pop-up menu.  Then, without 
pausing to draw breath, type the word tutorial.  Press the Enter key and you're done.   
Mac users:
You can do this quite simply by clicking on the desktop while pressing the 
Control key; choose New Folder from the pop-up menu.  Then, without pausing to 
think, type the word tutorial.  Press the Return key and you're done. 
Next, you must retrieve the necessary materials from the Web. 
· 
Start Netscape, and point the browser to this URL:
h
tt
p
://
ca
t.
xu
l
a
.
e
du
/t
u
t
o
ri
a
ls/
h
t
m
l/ 
·  Find the section of the page under the heading Tutorial Materials. 
·  Follow the link to All_About_Mustard.doc which is a Microsoft Word Document. 
·  Save this file in the tutorial folder you created earlier.  (You'll be prompted by Netscape.) 
·  Follow the link to template.txt which is a plain text file. 
The contents of the file will be displayed in the browser window.  It should look like this: 
<
!
DOCTYPE
HT
M
L
PUBL
I
C
"-//W
3C
//
DTD
HT
M
L
4
.
01
T
ra
n
siti
on
a
l//
EN
"
"
h
tt
p
://
www
.
w3
.
o
r
g
/
TR
/
1999
/
REC
-
h
t
m
l
401
-
19991224
/l
oo
se
.
d
t
d
"
>
<HT
M
L>
<HEAD>
<T
I
TLE>Un
titl
e
d<
/
T
I
TLE>
<
/
HEAD>
<BODY>
<
/
BODY>
<
/
HT
M
L>
This should look familiar to you.  You'll use this raw code as a template for your first Web page.  
The best way to save this file to disk is simply to copy and paste:  
·  Choose Edit > Select All to select all the text. 
·  Choose Edit > Copy to copy the selected text. 
·  Launch a text editor. 
Windows users:
Use Notepad.  From the Windows Start menu, choose Run…  and 
enter notepad
Mac users:
Use SimpleText.  This application can usually be found on the hard drive, in 
the Applications folder. 
·  In your text editor, select Edit > Paste The text you copied from your browser should 
appear in the window of the text editor. 
·  Save this file.  Name it template.txt and make sure that you are saving it in your tutorial 
folder. 
·  Close your text editor and return to Netscape. 
You should now have a Word document and a plain text file in your tutorial folder — all the 
materials you need to complete this tutorial. 
C# PDF insert text Library: insert text into PDF content in C#.net
without adobe reader installed in ASP.NET. Powerful .NET PDF edit control allows modify existing scanned PDF text. Ability to change text font, color, size and
extract pdf form data to excel; saving pdf forms in acrobat reader
C# PDF Annotate Library: Draw, edit PDF annotation, markups in C#.
reader installed. Support to add text, text box, text field and crop marks to PDF document. Able to edit and change PDF annotation properties such as font size
save pdf forms in reader; flatten pdf form in reader
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
2.  From Word Processor to Web Page 
Often your Web pages will begin their digital life as word processing documents.  In order to 
"mark up" such a document with HTML, you must first get it into a plain text format. 
One way to do this is by saving the document as a "text only" file.  A simpler way is to copy the 
text from the word processing program and paste it into a text editor, much as you did with the 
template.txt file.  Here's how: 
·  Open the file named All_About_Mustard.doc which you saved to your tutorial folder.  
(Double-clicking the file's icon should launch Microsoft Word.  If not, you will have to 
start Word yourself and open the file from Word.) 
·  Take a moment to look over the document and familiarize yourself with its contents and 
general structure.  A copy of this document is attached to the end of this tutorial; you may 
find it more convenient to refer to the printed copy as you proceed. 
·  Choose Edit > Select All to select all the text. 
·  Choose Edit > Copy to copy the selected text. 
·  Open the template.txt file which you saved in your tutorial folder.  (Double-clicking the 
file's icon should launch your text editor.  If not, you will have to start your text editor 
yourself and open the file within that application.) 
·  Click between the opening and closing BODY tags. 
·  Choose Edit > Paste The text you copied from Word should appear in the window of the 
text editor.  Note that all the special formatting has been stripped away.  All that remains 
is plain text and line breaks (carriage returns). 
Windows users:
You may need to choose Edit > Word Wrap to see all the text. 
C# PDF Sticky Note Library: add, delete, update PDF note in C#.net
enable users to annotate PDF without adobe PDF reader control installed. Able to add notes to PDF using C# source Able to change font size in PDF comment box.
pdf form data extraction; export pdf form data to excel
C# PDF Field Edit Library: insert, delete, update pdf form field
Able to add text field to specified PDF file position in C#.NET class. Support to change font size in PDF form. Able to delete form fields from adobe PDF file.
cannot save pdf form in reader; html form output to pdf
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
Your document should now look something like this: 
<
!
DOCTYPE
HT
M
L
PUBL
I
C
"-//W
3C
//
DTD
HT
M
L
4
.
01
T
ra
n
siti
on
a
l//
EN
"
"
h
tt
p
://
www
.
w3
.
o
r
g
/
TR
/
1999
/
REC
-
h
t
m
l
401
-
19991224
/l
oo
se
.
d
t
d
"
>
<HT
M
L>
<HEAD>
<T
I
TLE>Un
titl
e
d<
/
T
I
TLE>
<
/
HEAD>
<BODY>
A
ll 
Abou
M
u
st
ar
d
An
Abb
re
v
i
a
t
e
d
H
ist
o
r
y
o
M
u
st
ar
d
Th
e
G
ree
k
s
u
se
d
m
u
st
ar
d
as
a
c
ond
i
me
n
a
nd
a
d
r
ug
bu
t it 
w
as
 t
h
e
Ro
ma
n
s
who
 first 
ma
d
e
 rea
c
u
li
n
ar
y
u
se
o
f it 
by
g
ri
nd
i
ng
 t
h
e
see
d
s
a
nd
m
i
x
i
ng
 t
h
e
 fl
ou
w
it
h
w
i
n
e
v
i
n
e
g
ar, 
o
il 
a
nd
hon
e
y
.  
W
h
e
n
 t
h
e
y
m
ov
e
d
 i
n
t
o
G
a
u
l t
h
e
y
 t
ook
m
u
st
ar
d
p
l
a
n
ts
w
it
h
 t
h
em
a
nd
 it 
w
as
 i
n
 t
h
e
 ri
c
h
w
i
n
e
g
r
ow
i
ng
 re
g
i
on
o
Bu
r
gundy
 t
h
a
m
u
st
ar
d
fl
ou
ris
h
e
d
It is
 re
pu
t
e
d
 t
h
a
a
a
 festi
v
a
l i
n
1336
a
tt
e
nd
e
d
by
 t
h
e
Duk
e
o
Bu
r
gundy
a
nd
h
is
c
ou
si
n
K
i
ng
Ph
ili
p
 t
h
e
F
a
ir, 
no
 l
ess
 t
h
a
n
70
g
a
ll
on
s
o
m
u
st
ar
d
w
ere
ea
t
e
n
.  
R
e
po
rts
do
no
sa
y
how
p
i
c
k
l
e
d
 t
h
e
gu
ests
w
ere
Pop
e
J
ohn
XX11
o
Av
i
gnon
 l
ov
e
d
m
u
st
ar
d
s
o
m
u
c
h
 t
h
a
h
e
crea
t
e
d
 t
h
e
po
st 
o
"M
u
st
ar
d
Ma
k
er t
o
 t
h
e
Pop
e
,
"
a
 j
ob
h
e
g
a
v
e
 t
o
a
n
 i
d
l
e
n
e
ph
e
w
who
 li
v
e
d
n
ear 
D
ij
on
 
D
ij
on
s
oon
b
ecame
 t
h
e
m
u
st
ar
d
ce
n
tre
o
f t
h
e
wo
rl
d
a
nd
 i
n
 fac
s
o
i
m
po
rt
a
n
w
as
 it t
h
a
t i
n
1634
a
 l
a
w
w
as
p
asse
d
 t
o
g
ra
n
t t
h
e
me
n
o
f t
h
e
 t
own
 t
h
e
e
x
c
l
u
si
v
e
 ri
gh
t t
o
ma
k
e
m
u
st
ar
d
1777
sa
w
 t
h
e
st
art 
o
m
u
st
ar
d
ma
k
i
ng
as
w
e
know
 it t
od
a
y
as
 it 
w
as
 i
n
 t
h
is
y
ear 
t
h
a
Messi
e
u
rs
G
re
y
a
nd
Poupon
 f
ound
e
d
 t
h
e
ir 
c
o
m
p
a
ny
 
Th
e
y
u
se
d
G
re
y
'
s
 rec
i
p
e
a
nd
Poupon
'
s
m
on
e
y
 
We
still 
ow
e
a
 l
o
t t
o
 t
h
is
 re
doub
t
a
b
l
e
duo
as
 i
n
1850
 t
h
e
ir 
c
o
m
p
a
ny
 i
nv
e
n
t
e
d
a
st
eam
op
era
t
e
d
g
ri
nd
i
ng
mac
h
i
n
e
s
o
e
nd
i
ng
 t
h
e
era
o
f l
a
bo
ri
ou
s
a
nd
b
ac
k
-
b
rea
k
i
ng
h
a
nd
g
ri
nd
i
ng
And
as
Jes
u
s
sa
i
d
 i
n
 t
h
e
Go
s
p
e
o
Tho
mas: 
[
Th
e
K
i
ngdo
m
o
H
ea
v
e
n
] is
 li
k
e
a
m
u
st
ar
d
see
d
. It is
 t
h
e
sma
ll
est 
o
a
ll 
see
d
s; 
bu
wh
e
n
 it fa
lls
on
 till
e
d
s
o
il, it 
p
r
odu
ces
a
g
rea
p
l
a
n
a
nd
b
ec
o
mes
a
s
h
e
lt
er 
f
o
b
ir
d
s
o
f t
h
e
a
ir. 
A
M
u
st
ar
d
R
ec
i
p
e
I
ng
re
d
i
e
n
ts
4
T
a
b
l
es
poon
s
D
r
y
m
u
st
ar
d
powd
er  
1
T
a
b
l
es
poon
W
h
it
e
Wi
n
e
V
i
n
e
g
ar  
2
T
a
b
l
es
poon
s
F
l
a
b
eer  
1
C
l
ov
e
G
arli
c
1
T
eas
poon
Sug
ar  
1
/
2
T
eas
poon
S
a
lt  
1
/
4
T
eas
poon
Tu
r
meri
c
1
T
a
b
l
es
poon
O
li
v
e
o
il -- 
op
ti
on
a
l  
P
re
p
ara
ti
on
1
W
h
is
k
 t
og
e
t
h
er 
d
r
y
m
u
st
ar
d
v
i
n
e
g
ar 
a
nd
b
eer.  
2
U
se
a
g
arli
c
p
ress
o
r l
ar
g
e
p
a
ir 
p
li
ers
 t
o
s
qu
eeze
 t
h
e
 j
u
i
ce
 fr
o
m
 t
h
e
c
l
ov
e
o
g
arli
c
 i
n
t
o
 t
h
e
m
i
x
t
u
re
 
3
S
tir i
n
s
ug
ar, 
sa
lt 
a
nd
 t
u
r
meri
c
.  
4
To
ma
k
e
m
u
st
ar
d
sm
oo
t
h
er 
a
nd
 l
ess
ho
t, 
a
dd
o
li
v
e
o
il t
o
 t
ast
e
M
u
st
ar
d
L
i
nk
s
§
Eu
r
op
ée
nn
e
d
e
Cond
i
me
n
ts
h
tt
p
://
www
.
m
ou
t
ar
d
e
.
c
o
m
A
m
u
st
ar
d
c
o
m
p
a
ny
'
s
w
e
b
sit
e
§
M
u
st
ar
d
G
as
h
tt
p
://
www
.
s
p
art
ac
u
s
.
sc
hoo
l
n
e
t.
c
o
.
uk
/
F
WWm
u
st
ar
d
.
h
t
m
A
d
escri
p
ti
on
o
m
u
st
ar
d
g
as
§
M
oun
Ho
re
b
M
u
st
ar
d
M
u
se
u
m
h
tt
p
://
www
.
m
u
st
ar
dw
e
b
.
c
o
m
Th
e
wo
rl
d
'
s
 l
ar
g
est 
c
o
ll
ec
ti
on
o
p
re
p
are
d
m
u
st
ar
d
s
<
/
BODY>
<
/
HT
M
L>
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
PDF document, keeps the elements (like images, tables and chats) of original PDF file and maintains the original text style (including font, size, color, links
pdf data extractor; pdf data extraction open source
Generate Barcodes in Web Image Viewer| Online Tutorials
Set barcode orientation and rotation angle; Change barcode image width & height; Colorize Set human-readable text font style, color, size; Resize barcode
extract data from pdf to excel; save data in pdf form reader
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
Now you need to save a copy of this file, without overwriting our original template.  You also need 
to designate the new copy as a hypertext file, rather than a plain text file. 
·  Choose File > Save As…  
·  Name the file mustard.html and click the Save button, making sure to save the file in 
your tutorial folder. 
Congratulations!  You've just created a Web page.  It's incomplete, to be sure, but take a moment 
to see how it looks in your Web browser: 
·  Return to Netscape. 
·  Choose File > Open Page (Mac users should choose File > Open > Page in Navigator.) 
·  A dialog box should appear.  Navigate to your tutorial folder.  (Windows users will need 
to click the Choose File button.) 
·  Choose the mustard.html file, and click the Open button. 
Your Web page should now be displayed in the browser.  Note how all the text is run together.  All 
the extra whitespace and line breaks are ignored by the browser. 
Here's what you've accomplished so far: by using the template file, you saved yourself the chore of 
typing out the basic "shell" of the Web page.  The template establishes the global structure of the 
document, including version information and the HEAD and BODY. 
You've pasted raw text into the BODY of the document.  However, you have not yet marked up any 
of the text, and so the text has no logical structure. 
2.1  Titling Your Document 
Before marking up your text, you need to give the HTML document a title. 
·  Return to your text editor.  The mustard.html file should still be open.  (If not, you will 
need to open it within your text editor.) 
·  Find the T
I
TLE tags, in the HEAD of the document. 
·  Delete the word Untitled from between the T
I
TLE tags. 
·  Type a new title, such as Sample Web Page About Mustard . 
The title element should now look something like this: 
<T
I
TLE>You
T
itl
e
H
ere
<
/
T
I
TLE>
· Save your file. 
VB.NET Image: Visual Basic .NET Guide to Draw Text on Image in .
Please note that you can change some of the example, you can adjust the text font, font size, font type (regular LoadImage) Dim DrawFont As New Font("Arial", 16
how to make pdf editable form reader; c# read pdf form fields
Generate Image in .NET Winforms Imaging Viewer| Online Tutorials
Change Barcode Properties. barcode rotation angle; Click "Width" and "Height" to set barcode size; Click "Font" to choose human-readable text font style, color
pdf data extraction to excel; extract data from pdf file to excel
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
3.  Marking Block Elements 
Now you will designate the basic structure of the text.  Each chunk of text must be designated as 
belonging to a block element such as a heading or a paragraph. 
In order to designate an element, you must surround the chunk of text with the appropriate tags.  
An opening tag, such as <P>, marks the beginning of the element.  A closing tag, such as <
/
P> 
(note the forward slash) marks the end of the element. 
·  Mark the first heading.  That's the line which reads "All About Mustard."  Since it's the 
heading for the whole page, mark it as a first-level heading, like so:
<H1>A
ll 
Abou
M
u
st
ar
d<
/
H1>
Note:
That's a number one (1) after the H, not a lowercase letter L ! 
·  Choose File > Save to save your work. 
That's all there is to it.  This is what's meant by marking an element.
Now check your work: 
·  Return to Netscape. 
·  The mustard.html page should still be displayed, but the browser is showing the old 
version.  To display the changes you just made, click the Reload button. 
The browser should reload the page.  It is, in essence, re-reading the file from the disk and getting 
the new version you just saved.  You should observe a very noticeable change in the page's 
appearance. 
Now you must continue to mark up the rest of the text.  This procedure requires you to exercise 
some judgment.  The following instructions do not tell you exactly what to type.  Rather, you will 
be instructed to "mark all the paragraphs," for example.  It is up to you to decide what constitutes 
a paragraph, and to figure out which tag to use.  Refer to the printed Word document and other 
materials as you need them.  You should save your work often, and check your work in the 
browser often. 
Hint:
For cleaner, easier-to-read markup, insert carriage returns liberally, whenever you 
need them.  Remember that they will not be visible in the browser.
·  Return to your text editor.  The mustard.html file should still be open.  (If not, you will 
need to open it within your text editor.) 
·  Mark all the headings.  Remember that headings range from H1 (most important) to H6 
(least important).  You've already marked a first-level heading, so mark up some second- 
and third-level ones. 
Hint:
There are three second-level headings and two third-level headings in the 
document. 
For example, the second heading should be marked to look like  this: 
<H2>An
Abb
re
v
i
a
t
e
d
H
ist
o
r
y
o
M
u
st
ar
d<
/
H2>
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
·  Mark all the paragraphs with P tags. 
Hint:
There are six paragraphs total, and they're all in the first section of the document.  
The extended quotation is  a paragraph. 
For example, a marked paragraph should look like this: 
<P>
It is
 re
pu
t
e
d
 t
h
a
a
a
 festi
v
a
l i
n
1336
a
tt
e
nd
e
d
by
 t
h
e
Duk
e
o
Bu
r
gundy
a
nd
h
is
c
ou
si
n
K
i
ng
Ph
ili
p
 t
h
e
F
a
ir, 
no
 l
ess
 t
h
a
n
70
g
a
ll
on
s
o
m
u
st
ar
d
w
ere
ea
t
e
n
 
R
e
po
rts
do
no
sa
y
how
p
i
c
k
l
e
d
 t
h
e
gu
ests
w
ere
<
/
P>
·  Mark the extended quotation with BLOCKQUOTE tags.   
Hint:
The BLOCKQUOTE tags should surround the P tags. 
<BLOCKQUOTE>
<P>
[
Th
e
K
i
ngdo
m
o
H
ea
v
e
n
] is
 li
k
e
a
m
u
st
ar
d
see
d
. It is
 t
h
e
sma
ll
est 
o
a
ll 
see
d
s; 
bu
wh
e
n
 it fa
lls
on
 till
e
d
s
o
il, it 
p
r
odu
ces
a
g
rea
p
l
a
n
a
nd
b
ec
o
mes
a
s
h
e
lt
er f
o
b
ir
d
s
o
f t
h
e
a
ir. 
<
/
P>
<
/
BLOCKQUOTE>
·  Mark the ordered list (the one that is numbered) with OL tags. 
Hint:
You are marking the whole list here, not the individual items in the list. 
<OL>
1
W
h
is
k
 t
og
e
t
h
er 
d
r
y
m
u
st
ar
d
v
i
n
e
g
ar 
a
nd
b
eer.  
2
U
se
a
g
arli
c
p
ress
o
r l
ar
g
e
p
a
ir 
p
li
ers
 t
o
s
qu
eeze
 t
h
e
 j
u
i
ce
 fr
o
m
 t
h
e
c
l
ov
e
o
g
arli
c
 i
n
t
o
 t
h
e
m
i
x
t
u
re
3
S
tir i
n
s
ug
ar, 
sa
lt 
a
nd
 t
u
r
meri
c
4
To
ma
k
e
m
u
st
ar
d
sm
oo
t
h
er 
a
nd
 l
ess
ho
t, 
a
dd
o
li
v
e
o
il t
o
 t
ast
e
<
/
OL>
·  Mark the unordered list (the bulleted list of links) with UL tags. 
<UL>
*
Eu
r
op
ée
nn
e
d
e
Cond
i
me
n
ts
h
tt
p
://
www
.
m
ou
t
ar
d
e
.
c
o
m
A
m
u
st
ar
d
c
o
m
p
a
ny
'
s
w
e
b
sit
e
*
M
u
st
ar
d
G
as
h
tt
p
://
www
.
s
p
art
ac
u
s
.
sc
hoo
l
n
e
t.
c
o
.
uk
/
F
WWm
u
st
ar
d
.
h
t
m
A
d
escri
p
ti
on
o
m
u
st
ar
d
g
as
*
M
oun
Ho
re
b
M
u
st
ar
d
M
u
se
u
m
h
tt
p
://
www
.
m
u
st
ar
dw
e
b
.
c
o
m
Th
e
wo
rl
d
'
s
 l
ar
g
est 
c
o
ll
ec
ti
on
o
p
re
p
are
d
m
u
st
ar
d
s
<
/
UL>
·  Mark the individual list items in both lists with L
I
tags.  Don't forget to mark up both the 
Preparation list and the Mustard Links list. 
Hint:
There are only three items (not nine) in the list of links. 
<L
I
>
Eu
r
op
ée
nn
e
d
e
Cond
i
me
n
ts
http://www.moutarde.com/ 
A
m
u
st
ar
d
c
o
m
p
a
ny
'
s
w
e
b
sit
e
<
/
L
I
>
·  Add a horizontal rule at the end of the page with the HR tag. 
Hint:
The tag still needs to be in the BODY of the document.   Also, remember that this is 
an empty content tag, so there is no closing tag. 
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
·  Add some information about how to contact the author of the page after the HR tag.  Type 
something like: This page is maintained by Bart Everson [bpeverso@xula.edu]. 
Substitute your own name and e-mail address for mine. 
·  Mark the line you just typed with ADDRESS tags. 
Every chunk of text should now be enclosed in one HTML tag or another. 
·  Choose File > Save to save your work. 
·  Return to Netscape and reload the page to check your work. 
You should notice some problems.  The ordered list may have duplicate numbers, and the list of 
links may have a § or * symbol after each bullet.  These are artifacts of the conversion from Word 
to HTML.  Also, the list of ingredients is still a jumbled mess.  The list of links is also messy. 
Fix these problems as follows: 
·  Return to your text editor. 
·  Delete the numbers in the ordered list.  They don't need to be explicitly stated. 
·  Delete the § or * symbols from the list of links.  They are also redundant. 
What about the list of ingredients?  You  could mark it as an unordered list, but then it would be 
bulleted.  Besides, you already have one unordered list on the page.  Therefore you will mark this 
as preformatted text. 
·  Mark the list of ingredients with the PRE tag. 
·  Choose File > Save to save your work. 
·  Return to Netscape and reload the page to check your work. 
The problems should be fixed, except for the list of links.  You will fix that problem in section 4 
below. 
3.1  Setting the Background Color 
It would be nice to make the background of the page yellow — sort of a visual joke.  You will do 
this by customizing the BODY tag with an attribute. 
·  Return to your text editor.  The mustard.html file should still be open. 
·  Expand the opening BODY tag to include the BGCOLOR (background color) attribute, and 
set the value to yellow . 
Hint:
This would be a good time to review attribute syntax. 
The opening BODY tag should look exactly like this: 
<BODY
BGCOLOR=
"
y
e
ll
ow
"
>
·  Choose File > Save to save your work. 
·  Return to Netscape and reload the page to check your work. 
If you find the results too garish for your tastes, you can change the BGCOLOR value to lightyellow  
instead. 
3.2  Validating Your Work 
Before you proceed, it's a good idea to validate your HTML and make sure you're on track so far. 
·  Point your browser to this URL: 
How the Web Works, Part I: Introduction to HTML 
HTML Tutorial
10 
h
tt
p
://
v
a
li
d
a
t
o
r.
w3
.
o
r
g
/
This is the W3C's HTML validation service.  It allows you to enter a URL for any page that's on the 
Web and check the validity of its HTML. 
·  Since your Web page is not on the Web (yet), follow the "upload files" link toward the 
bottom of the page. 
This will take you to a page which allows you to check the validity of files from your hard drive. 
·  Click the Browse button. 
·  Navigate to your tutorial folder, select the mustard.html file, and click the Open button. 
·  Click the Validate this document button. 
If you're lucky, you'll get a "No errors found!" message.  If not, examine the results to see if you 
can pinpoint your mistake.  Once you've corrected your errors, try to validate your document 
again.  Don't move on to the next section until you succeed. 
Documents you may be interested
Documents you may be interested