Scribd
Upload
90 views

U1 CreatingWebsiteBasicsUsingHTML

This document provides an overview of how to create basic websites using HTML including: - Using text editors like Notepad to write HTML code - Saving files with the .html or .htm extension - Viewing web pages in browsers after saving HTML files - Examples of basic HTML tags for headings, links, images, lists, and tables - How to add forms, text boxes, radio buttons, drop-down lists, and text areas

Uploaded by

Sherril Vincent
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
90 views

U1 CreatingWebsiteBasicsUsingHTML

This document provides an overview of how to create basic websites using HTML including: - Using text editors like Notepad to write HTML code - Saving files with the .html or .htm extension - Viewing web pages in browsers after saving HTML files - Examples of basic HTML tags for headings, links, images, lists, and tables - How to add forms, text boxes, radio buttons, drop-down lists, and text areas

Uploaded by

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

IT8201-INFORMATION TECHNOLOGY ESSENTIALS

Creating a Website

PRE-REQUISITES:
Example: Sample HTML file
first.html
<!DOCTYPE html>
<html>
<head> <title>Page Title</title> </head>
<body>
<p>My first HTML </p>
</body>
</html>
Output
My first HTML
Creating HTML5 documents
Text Editors:
The markup language or text can be typed in the following text editors
Windows : Notepad, Notepad++
Mac : TextEdit
LINUX : vi, emacs, jEdit

File Extension:
Save the markup text with .html or .htm file extension
E.g. sample.html, basic.htm

To create web page with Notepad:


Windows 8 : Open the Start Screen (Search Box). Type Notepad.
Windows 7 or earlier : Open Start > Programs > Accessories > Notepad

To create web page with TextEdit:


1) Open Finder > Applications > TextEdit
2) Change the preferences to get the application to save files correctly.
3) In Preferences > Format > choose "Plain Text".
4) Then under "Open and Save", check the box "Ignore rich text commands in HTML files".
5) Then open a new document to place the code.

Web Browsers:
Reads HTML documents and displays them
E.g. Chrome, IE, Firefox, Safari

Steps to create a webpage using HTML


Step-1. Open a TextEditor (Notepad/Notepad++/TextEdit/jEdit)
Step-2. Write the html code
<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>Welcome to HTML5!</p>
</body>
</html>
Step-3. Save the file as First.html.
Step-4. Go to the folder containing “First.html” file. Right Click the File  Open with  Google Chrome (or)
Internet Explorer (or) Mozilla Firefox
Step-5. You can see the webpage displayed in the browser.

1|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS
Creating a Website

Program: First HTML example


test.html
<!DOCTYPE html>
<!-- main.html -->
<!-- First HTML5 example. -->
<html>
<head>
<meta charset = "utf-8">
<title>Welcome</title>
</head>
<body>
<p>Welcome to HTML5!</p>
</body>
</html>
Output:

Program: To create Heading


<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Level1 Heading</h1>
<h2>Level1 Heading</h2>
<h3>Level1 Heading</h3>
<h4>Level1 Heading</h4>
<h5>Level1 Heading</h5>
<h6>Level1 Heading</h6>
</body>
</html>

Program: To create links / hyperlinks


<html>
<head>
<title>Linking to other Web Pages</title>
</head>
<body>
<p> <a href="http://www.deitel.com"> Deitel</a> </p>

<p> <a href="http://www.google.com">google</a> </p>

<p> <a href="http://www.yahoo.com">yahoo</a> </p>


</body>
</html>

2|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS
Creating a Website

Program: To link emails


<html>
<head>
<title>Linking to other Web Pages</title>
</head>
<body>
Mail to
<a href="mailto:[email protected]">[email protected]</a>
</body>
</html>

Program: To insert images


<html>
<head>
<title>Images</title>
</head>
<body>
<img src="C:\ Pictures\Chrysanthemum.jpg" width="100" height="100" alt="Chrysanthemum"/>
</body>
</html>

Program: To link image as hyperlink


<html>
<head>
<title>Navigation Bar</title>
</head>
<body>
<a href = "welcome.html">
<img src = " Penguins.jpg " width = "65" height = "50" alt = "Links">
</a>
</p>
</body>
</html>

Program: To create ordered list & unordered list


<html> </ul>
<head>
<title>program1</title>
</head> </body>
<body bgcolor="aqua"> </html>

<p>ordered list </p>


<ol>
<li>india</li>
<li>pakistan</li>
<li>china</li>
</ol>

<p>Unordered list </p>


<ul>
<li>india</li>
<li>pakistan</li>
<li>china</li>

3|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

Program: Inserting special characters


<html>
<head>
<title>Characters</title>
</head>
<body>
<hr> <!-- inserts a horizontal rule -->

<p>All information on this site is <strong> &copy; XYZ & Associates, Inc. 2012.</strong> </p>
<!-- to strike through text use <del> element -->
<!-- to subscript text use <sub> element -->
<!-- to superscript text use <sup> element -->
<!-- these elements are nested inside other elements -->
<p>
<del>You may download 3.14 x 10<sup>2</sup> characters worth of information from this site.</del>
The first item in the series is x<sub>1</sub>.</p>
<p>Note: &lt; &frac14; of the information presented here is updated daily.</p>
</body>
</html>

Program: To create frames


cyan.html skyblue.html yellow.html
<html> <html> <html>
<head> <head> <head>
<title>Welcome</title> <title>Welcome</title> <title>Welcome</title>
</head> </head> </head>
<body bgcolor="cyan"> <body bgcolor=" skyblue "> <body bgcolor="yellow">
</body> </body> </body>
</html> </html> </html>

Frame.html
<html>
<head>
<title>Frames Demo</title>
</head>
<frameset cols="25%,*,25%">
<frame src="cyan.html">
<frame src="yellow.html">
<frame src="skyblue.html">
</frameset>
</html>

4|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

Program: To create table


<html>
<head> <tr>
<title>program1</title> <td>CHINA</td>
</head> <td>0</td>
<body bgcolor="aqua"> <td>1</td>
<table cellspacing="6" cellpadding=”5” <td>2</td>
border="6"> </tr>
<tr>
<th>Country</th> <tr>
<th>GOLD</th> <td>JAPAN</td>
<th>SILVER</th> <td>1</td>
<th>BRONZE</th> <td>0</td>
</th> <td>2</td>
</tr> </tr>
<tr>
<td>INDIA</td> </table>
<td>0</td>
<td>1</td> </body>
<td>2</td> </html>
</tr>

Program: To create form and textbox


<html>
<head> <title>TextboxDemo</title> </head>
<body>
<form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>
</body>
</html>
Output
First name:

Last name:
Program: Radio Button Input
<html>
<head> <title>Demo</title> </head> Male
<body>
Female
<form>
<input type="radio" name="sex" value="male"
checked>Male <br>
<input type="radio" name="sex"
value="female">Female
</form>
</body>
</html>

5|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

Program: The Submit Button


<html>
<head> <title>Demo</title> </head>
<body>
<form action="action_page.php">
First name:<br> <input type="text" name="firstname" value="Mickey">
Last name:<br> <input type="text" name="lastname" value="Mouse">

<input type="submit" value="Submit">


</form>
</body>
</html>

First name:

Last name:
Submit

Program: To create Drop-Down List


<html>
<head> <title>Forms</title> </head>
<body>
<form>
<select name="cars">
<option value="volvo"> Volvo </option>
<option value="saab"> Saab </option>
<option value="fiat"> Fiat </option>
<option value="audi"> Audi </option>
</select>
</form>
</body>
</html>

Program: To create Text Area


<html>
<head> <title>Forms</title> </head>
<body>
<form>
<textarea name="message"
rows="10" cols="30">
</textarea>
</form>
</body>
</html>

6|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

Program: Form with a text field, hidden fields & button


<html>
<head>
<title>Forms</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help us improve our site.</p>

<form method = "post" action = "http://www.deitel.com">

<input type = "hidden" name = "subject" value = "Feedback Form">

<p>
<label>Name: <input name = "name" type = "text" size = "25" maxlength = "30"> </label>
</p>

<p>
<input type = "submit" value = "Submit">

<input type = "reset" value = "Clear">


</p>
</form>
</body>
</html>

Program: To create Feedback Forms


<html>
<head> <title>More Forms</title> </head>
<body>
<h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p>
<form method = "post" action = "http://www.deitel.com">
<!-- Hidden Fields -->
<input type = "hidden" name = "recipient" value = "[email protected]">
<input type = "hidden" name = "subject" value = "Feedback Form">
<input type = "hidden" name = "redirect" value = "main.html">

<!—Label and Textbox -->


<p>
<label>Name: <input type = "text" name = "name" size = "25"> </label></p>

<!-- TextArea --><!-- creates a multiline textbox -->


<p>
<label>Comments: <br>
<textarea name = "comments" rows = "4" cols = "36">Enter comments here.</textarea>
</label>
</p>
<!-- Password --> <!-- textbox whose display is masked with asterisk characters -->
<p><label>E-mail Address: <input type = "password" name = "email" size = "25">
</label></p>
<!-- Checkbox -->
<p>
<strong>Things you liked:</strong><br>
<label>Site design <input type = "checkbox" name = "thingsliked" value = "Design"> </label>
<label>Links <input type = "checkbox" name = "thingsliked" value = "Links"> </label>
<label>Ease of use <input type = "checkbox" name = "thingsliked" value = "Ease"> </label>

7|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

<label>Images <input type = "checkbox" name = "thingsliked" value = "Images"> </label>


<label>Source code <input type = "checkbox" name = "thingsliked" value = "Code"> </label>
</p>

<!-- Radiobutton -->


<p>
<strong>How did you get to our site?:</strong><br>
<label>Search engine
<input type = "radio" name = "howtosite" value = "search engine" checked>
</label>
<label>Links from another site
<input name = "howtosite" type = "radio" value = "link">
</label>
<label>Deitel.com Web site
<input name = "howtosite" type = "radio" value = "deitel.com">
</label>
<label>Reference in a book
<input name = "howtosite" type = "radio" value = "book">
</label>
<label>Other
<input name = "howtosite" type = "radio" value = "other">
</label>
</p>
<!—Drop-down List -->
<p>
<label>Rate our site:
<select name = "rating">
<option selected>Amazing</option>
<option>10</option>
<option>5</option>
<option>1</option>
<option>Awful</option>
</select>
</label>
</p>

<!—Button -->
<p>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>

</form>
</body>
</html>

Program: To create HTML5 form input types and attributes


<html>
<head>
<title>New HTML5 Input Types</title>
</head>
<body>
<h1>New HTML5 Input Types Demo</h1>
<form method = "post" action = "http://www.deitel.com">

8|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

<p>
<label>Color:
<input type = "color" autofocus />
</label>
</p>

<p>
<label>Date:
<input type = "date" />
(yyyy-mm-dd)
</label>
</p>

<p>
<label>Datetime:
<input type = "datetime" />
(yyyy-mm-ddThh:mm+ff:gg, such as 2012-01-27T03:15)
</label>
</p>

<p>
<label>Datetime-local:
<input type = "datetime-local" />
(yyyy-mm-ddThh:mm, such as 2012-01-27T03:15)
</label>
</p>

<p>
<label>Email:
<input type = "email" placeholder = "[email protected]" required />
([email protected])
</label>
</p>

<p>
<label>Month:
<input type = "month" /> (yyyy-mm)
</label>
</p>

<p>
<label>Number:
<input type = "number"
min = "0"
max = "7"
step = "1"
value = "4" />
</label> (Enter a number between 0 and 7)
</p>

<p>
<label>Range:
0
<input type = "range"
min = "0"
max = "20"

9|Page H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

value = "10" />


20
</label>
</p>

<p>
<label>Search:
<input type = "search" placeholder = "search query" />
</label> (Enter your search query here.)
</p>

<p>
<label>Tel:
<input type = "tel"
placeholder = "(###) ###-####"
pattern = "\(\d{3}\) +\d{3}-\d{4}" required />
(###) ###-####
</label>
</p>

<p>
<label>Time:
<input type = "time" />
(hh:mm:ss.ff)
</label>
</p>

<p>
<label>URL:
<input type = "url"
placeholder="http://www.domainname.com"/>
(http://www.domainname.com)
</label>
</p>
<p>
<label for = "txtList">Birth Month:
<input
type = "text"
id = "txtList"
placeholder = "Select a month"
list = "months" />
<datalist id = "months">
<option value = "January">
<option value = "February">
<option value = "March">
<option value = "April">
<option value = "May">
<option value = "June">
<option value = "July">
<option value = "August">
<option value = "September">
<option value = "October">
<option value = "November">
<option value = "December">
</datalist>
</label></p>

10 | P a g e H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

<p>
<label>Week:
<input type = "week" />
(yyyy-Wnn, such as 2012-W01)
</label>
</p>

<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</p>
</form>
</body>
</html>
input Type color <input type = "color" autofocus />
Enables the user to enter a color
autofocus Attribute <input type = "color" autofocus />
 It is an optional attribute
 It can be used in only one input element on a form—automatically gives the focus to
the input element, allowing the user to begin typing in that element immediately
Validation <input type = "submit">
Browser immediately checks the self-validating elements to ensure that the data is correct
in client side.
No Validation <input type = "submit" value = "Submit" formnovalidate />
input Type date <input type = "date" />
Enables the user to enter a date in the form yyyy-mm-dd.
input Type datetime <input type = "datetime" />
Enables the user to enter a
 date (year, month, day),
 time (hour, minute, second, fraction of a second) and the
 time zone set to UTC (CoordinatedUniversal Time or Universal Time, Coordinated)
input Type datetime-local <input type = "datetime-local" />
Enables the user to enter the date and time in a single control.
input Type email <input type = "email" />
Enables the user to enter an e-mail address or a list of e-mail addresses separated by
commas
placeholder Attribute <input type = "email" placeholder = "[email protected]" />
It allows you to place temporary text in a text field.
Generally, placeholder text is light gray and provides an example of the text and/or text
format the user should enter.
HTML5 supports placeholder text for only six input types— text search url
tel email password
required Attribute <input type = "email" placeholder = "[email protected]" required />
Forces the user to enter a value before submitting the form.
input Type month <input type = "month" /> (yyyy-mm)
Enables the user to enter a year and month in the format yyyy-mm, such as 2012-01.
input Type number <input type = "number"
min = "0"
max = "7"
step = "1"
value = "4" />
Enables the user to enter a numerical value—mobile browsers typically display a numeric
keypad for this input type.
input Type range <input type = "range"
min = "0"

11 | P a g e H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

max = "20"
value = "10" />
 Appears as a slider control
 You can set the minimum and maximum and specify a value.
input Type search <input type = "search" placeholder = "search query" />
Provides a search field for entering a query
input Type tel <input type = "tel"
placeholder = "(###) ###-####"
pattern = "\(\d{3}\) +\d{3}-\d{4}" required />
Enables the user to enter a telephone number
input Type time <input type = "time" />
Enables the user to enter an hour, minute, seconds and fraction of second
input Type url <input type = "url"
placeholder="http://www.domainname.com"/>
Enables the user to enter a URL
input Type week <input type = "week" />
Enables the user to select a year and week number in the format yyyy-Wnn
input Element <form method = "post" autocomplete = "on">
autocomplete Attribute It can be used on input types to automatically fill in the user’s information based on
previous input—such as name, address or e-mail.
datalist Element <input type = "text" id = "txtList"
placeholder = "Select a month" list = "months" />
<datalist id = "months">
<option value = "January">
<option value = "February">
<option value = "March">
<option value = "April">
<option value = "May">
<option value = "June">
<option value = "July">
<option value = "August">
<option value = "September">
<option value = "October">
<option value = "November">
<option value = "December">
</datalist>
It provides input options for a text input element
Program-13: Internal Linking: - Internal hyperlinks to make pages more navigable
<!DOCTYPE html>
<!--internal.html -->
<!-- Internal Linking -->
<html>
<head>
<meta charset = "utf-8">
<title>Internal Links</title>
</head>
<body>
<!-- id attribute creates an internal hyperlink destination -->
<h1 id = "features">The Best Features of the Internet</h1>
<!-- an internal link's address is "#id" -->
<p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>
<ul>
<li>You can meet people from countries around the world.</li>
<li>You have access to new media as it becomes public:
<ul>
<li>New games</li>
<li>New applications

12 | P a g e H.Bemesha Smitha,AP/IT, LICET


IT8201-INFORMATION TECHNOLOGY ESSENTIALS

<ul>
<li>For Business</li>
<li>For Pleasure</li>
</ul>
</li>
<li>Around the clock news</li>
<li>Search Engines</li>
<li>Shopping</li>
<li>Programming
<ul>
<li>HTML5</li>
<li>Java</li>
<li>Dynamic HTML</li>
<li>Scripts</li>
<li>New languages</li>
</ul>
</li>
</ul>
</li>
<li>Links</li>
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li>
</ul>
<!-- id attribute creates an internal hyperlink destination -->
<h1 id = "bugs">My 3 Favorite Bugs</h1>
<p>
<!-- internal hyperlink to features -->
<a href = "#features">Go to <em>Favorite Features</em></a>
</p>
<ol>
<li>Fire Fly</li>
<li>Gal Ant</li>
<li>Roman Tic</li>
</ol>
</body>
</html>

13 | P a g e H.Bemesha Smitha,AP/IT, LICET

You might also like