Web Tech Cyclesheet

HYPER TEXT MARKUP LANGUAGE (HTML)
1) Introduction to HTML
a. Create a webpage that prints your name to the screen.
<html>
<head>
</head>
<body>
<h1 align="center">R.Aishwarya</h1>
</body>
</html>
b. Create a webpage that prints the numbers 1 - 10 to the screen.
<html>
<head>
</head>
<body>
<h3 align="center">1</h3>
</body>
</html>
c. Create a webpage and set its title to "This is a webpage".
<html>
<head>
<title> this is a webpage</title>
</head>
<body>
<h2 align="center">This is a webpage</h2>
</body>
</html>
1)d) Create a webpage that prints the message "When was this webpage created? Check page's title for
the answer." to the screen, and set the title of the page to the current date.Create a webpage which
keeps track of the browsers information and do the following refreshes its page in 5 seconds, expires
in a duration of time
<html>
<body>
<p align="center">
When was this webpage created?<br>
<i>Check page's <b>title bar</b> for the answer</i>
</p>
</body>
</html>
1)e) Create a webpage that prints any text of your choice to the screen; do not include a head section in
the code.
<html>
<body>
<h2 align="center">This is a webpage</h2>
</body>
</html>
1)f) Create a webpage which keeps track of the browsers information and do the following
 refreshes its page in 5 seconds,
expires in a duration of time
<html>
<head>
<meta http-equiv="refresh" content="5">
<meta name="Expires"
content="Friday,12-Jul-19 10:05:00 GMT">
</head>
<body>
<p align="center">
page refreshes every 5seconds</p>
</body>
</html>
<html>
<head>
<meta http-equiv="refresh" content="5">
</head>
<body>
<p align="center">
When was this webpage created?<br>
<i>Check page's <b>title bar</b> for the answer</i>
</p>
</body>
</html>
2)a) Print your name in green
<html>
<head>
<title>Exercise No. 2a</title>
</head>
<body>
<h3 align="center"><font color="green">Aishwarya</h3>
</body>
</html>
2)b) Print the numbers 1 - 10, each number being a different color.
<html>
<head>
</head>
<body>
<h3 align="center"><font color="green">1</h3>
<h3 align="center"><font color="red">2</h3>
<h3 align="center"><font color="blue">3</h3>
<h3 align="center"><font color="black">4</h3>
<h3 align="center"><font color="brown">5</h3>
<h3 align="center"><font color="pink">6</h3>
<h3 align="center"><font color="orange">7</h3>
<h3 align="center"><font color="gray">8</h3>
<h3 align="center"><font color="purple">9</h3>
<h3 align="center"><font color="yellow">10</h3>
</body>
</html>
2)C) Prints your name in a Tahoma font.
<html>
<body>
<h3 align="center">
<font face="Tahoma"><u>Aishwarya</u></font>
</h3>
</body>
</html>
2)d)Display a part of a word with bold underline.
<html>
<body>
<h2 align="center"><b><u>This is a webpage</u></b></h2>
</body>
</html>
2)e) Print a paragraph with 4 - 5 sentences. Each sentence should be a different font
<html>
<body>
<p>
<font face="Courier New">
HTML stands for Hyper Text Markup Language.
</font>
<font face="Times New Roman">It is the core

language of the world wide web and is used to define
the structure and layout of web documents by using
various tags and attributes.
</font>
<font face="Helvetica">
Although a fundamental language of the web, HTML is a
static language - content created with it does not change.
</font>
<font face="Georgia">
HTML is used to specify the way webpages look, not how they
function.
</font>
</p>
</body>
</html>
2)f)Print a paragraph that is a description of a book; include the title of the book as well as its author.
Names and titles should be underlined, adjectives should be italicized and bolded.
<html>
<body>
<p>
One particular book which is recommended reading is <u>The Street Lawyer</u> by <u>John
Grisham</u>. This book is about a lawyer who begins re-evaluating his priorities in life when a bad
incident occurs within his law firm. Consequently, he becomes acquainted with the inner city streets,
and realizes the harsh existence of the homeless, and vows to give them a chance in the courts. <u>The
Street Lawyer</u> is a <b><i>great</i></b>
book. It is <b><i>well written</i></b> and <b><i>interesting</i></b>. Other books by <u>John
Grisham</u> include <u>The Firm</u>, <u>The Pelican Brief</u>, and <u>The Client</u>.
</p>
</body>
</html>
2)g) Print your name to the screen with every letter being a different heading size.
<html>
<body>
<h4>B</h4>
<h3>a</h3>
<h2>n</h2>
<h1>u</h1>
</body>
</html>
2)h)Write a comment line on your code and make sure it is not displayed in the page
2)i) Print a 2+b2=2ab

<html>
<head>
<title>Exercise No. 2e</title>
</head>
<body>
<marquee>a<sup>2</sup>+b<sup>=2</sup>=2ab</marquee><br>
</body>
</html>
2)j) Print H2O
<html>
<head>
<title>Exercise No. 2e</title>
</head>
<body>
H<sub>2</sub>O<br>
</body>
</html>
k. Display a c code as it is in the page
l. Set the background color of the page as yellow

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow
}
</style>
</head>
</html>
m. Set an image as background of the page
n. Set the font size as 10. Print it. Again try to decrease the font size. Check whether the font size is
reduced.
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face="Times New Roman" size="10">Times New Roman</font><br />
<font face="Verdana" size="5">Verdana</font><br />
</body>
</html>
o. Apply marquee for your name
<html>
<head>
<title>Exercise No. 2o</title>
</head>
<body>
<marquee>Aishwarya</marquee><br>
</body>
</html>
p. Display a paragraph contents in a single line.
3) HTML TEXT FORMATTING, LISTS EXERCISES
a. Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to it the
number 2 superscripted, an equal sign and the result
<html>
<head>
<body>
<h4>1<sup>2</sup>=1</h4><br>
<h4>2<sup>2</sup>=4</h4><br>
<h4>3<sup>2</sup>=9</h4><br>
<h4>4<sup>2</sup>=16</h4><br>
<h4>5<sup>2</sup>=25</h4><br>
<h4>6<sup>2</sup>=36</h4><br>
<h4>7<sup>2</sup>=49</h4><br>
<h4>8<sup>2</sup>=64</h4><br>
<h4>9<sup>2</sup>=81</h4><br>
<h4>10<sup>2</sup>=100</h4><br>
<h4>11<sup>2</sup>=121</h4><br>
<h4>12<sup>2</sup>=144</h4><br>
<h4>13<sup>2</sup>=169</h4><br>
<h4>14<sup>2</sup>=196</h4><br>
<h4>15<sup>2</sup>=225</h4><br>
<h4>16<sup>2</sup>=256</h4><br>
<h4>17<sup>2</sup>=289</h4><br>
<h4>18<sup>2</sup>=324</h4><br>
<h4>19<sup>2</sup>=361</h4><br>
<h4>20<sup>2</sup>=400</h4><br>
</body>
</head>
</html>
3)b)Prints 10 names with a line break between each name. The list should be
alphabetized, and to do this place a subscripted number next to each name based on
where it will go in the alphabetized list. (Example: Alan1). Print first, the unalphabetized
list with a subscript number next to each name, then the alphabetized list. Both lists
should have an <h1> level heading
<html>
<head>
<title>unalphabetical list</title>
<body>
<h1>bakya<sub>1</sub></h1><br>
<h1>aishuu<sub>2</sub></h1><br>
<h1>naveen<sub>3</sub></h1><br>
<h1>pooja<sub>4</sub></h1><br>
<h1>ragini<sub>5</sub></h1><br>
<h1>ramesh<sub>6</sub></h1><br>
<h1>harish<sub>7</sub></h1><br>
<h1>shibhu<sub>8</sub></h1><br>
<h1>suinidhi<sub>9</sub></h1><br>
<h1>sripriya<sub>10</sub></h1><br>
</body>
</html>
3)c) Print two lists with any information you want. One list should be an ordered list, the
other list should be an unordered list
<html>
<head>
<title>ordered list</title>
<body>
<ol>
<li>apple</li>
</ol>
<ul>
<li>Beetroot</li>
</ul>
</body>
</html>
3)d) Print a list which starts with 7 with the type i
<html>
<head>
<title>ordered list</title>
<body>
<ol type=i start=7>
<li>apple</li>
</body>
</html>
3)e)Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal
line print a paragraph relating to the text in the heading.
<html>
<body>
<h1>Cookie</h1>
<hr width="100%" />
<p>
A delicious confection that is quite popular when it comes to
sweets. Cookies come in various varieties including chocolate
chip, raisin, and macademia nut. A very different type of
cookie is a small text file stored on a user's computer by
a web server.
</p>
</body>
</html>
3)f) Print a definition list with 5 items
<html>
<head>
<title>definition list</title>
</head>
<body>
<dl>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>orange</li>
<li>black</li>
</dl>
</body>
</html>
3)g) Print two addresses in the same format used on the front of envelopes (senders
address in top left corner, receivers address in the center)
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<p align="left">388A, Road No 22, Jubilee Hills-Hyderabad</p>
<p align="center">29,sundarar street,rani bhel nagar,ranipet-3</p>
</body>
</html>
3)h) Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the
data that the abbreviations and acronyms represent
<html>
<body>
<abbr title="Abstract">Abstr.</abbr>
<br /><br />
<abbr title="Biochemistry">Biochem.</abbr>
<br /><br />
<abbr title="Example">Ex.</abbr>
<br /><br />
<abbr title="Literature">Lit.</abbr>
<br /><br />
<abbr title="Mathematics">Math.</abbr>
<br /><br />
<acronym title="World Wide Web Consortium">W3C</acronym>

<br /><br />
<acronym title="Institute of Electrical
and Electronic Engineers">IEEE</acronym>
<br /><br />
<acronym title="International Standards Organization">
ISO
</acronym>
<br /><br />
<acronym title="Hyper Text Markup Language">HTML</acronym>
<br /><br />
<acronym title="Beginners All Purpose
Symbolic Instruction Code">BASIC
</acronym>
<p>
Move your mouse over an abbreviation or acronym to get more data.
</p>
</body>
</html>
4) HTML IMAGE EXERCISES
a. Display five different images. Skip two lines between each image. Each image should have a title.
<html>
<head>
<title>Five images</title>
</head>
<body>
<img src="/images/apple.jpg" alt="Apple" title="Apple" />
<br /><br />
<img src="/images/sky.jpg" alt="Sky" title="Sky" />
<br /><br />
<img src="/images/swan.jpg" alt="Swan" title="Swan" />
<br /><br />
<img src="/images/tree.jpg" alt="Tree" title="Tree" />
<br /><br />
<img src="/images/waterfall.jpg" src="Waterfall" title="Waterfall" />
</body>
</html>
b. Display an image that has a border of size 2, a width of 200, and a height of 200.
<html>
<body>
<img src="/images/tree.jpg" width="200" height="200" alt="Tree" border="2" />
</body>
</html>
c. Display the image towards the right corner of the webpage
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
6)
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form >
Name <input type="text" name="Name" />
<br>
Adress <input type="text" name="Adress" />
<br>
Email <input type="text" name="Email" />
<br>
<p> How many pieces of fruit do you eat per day? </p>
<input type="radio" name="pieces" value="0"> 0 <br>
<input type="radio" name="pieces" value="more than 2"> More than 2 <br>
<p>Would you like a brochure?</p>
<input type="checkbox" name="brochure" value="on"> <br>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

Web Tech Cyclesheet

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web Tech Cyclesheet

Загружено:

Авторское право:

Доступные форматы

HYPER TEXT MARKUP LANGUAGE (HTML)

b. Create a webpage that prints the numbers 1 - 10 to the screen.

<font face="Times New Roman">It is the core

2)i) Print a 2+b2=2ab

l. Set the background color of the page as yellow

3) HTML TEXT FORMATTING, LISTS EXERCISES

<acronym title="World Wide Web Consortium">W3C</acronym>

4) HTML IMAGE EXERCISES

Вам также может понравиться