Scribd
Upload
11 views

Intoduction To HTML

Uploaded by

jahahajahajiqaa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Intoduction To HTML

Uploaded by

jahahajahajiqaa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

Introduction to Web

Dev: HTML
The secret for getting ahead is getting started

Khaoula Allak Kawtar Khallouq


GDSC Lead GDSC core team
Our journey throughout this talk
• Introduction to Web Development.
• Introduction to HTML
• Basic Structure of an HTML Document
• HTML Elements
• HTML Tables
• HTML Forms
What is Web Development?
Web development refers to the process of
creating and maintaining websites.

It is classified into two ways:


I. Front-End Development
2. Back-End Development
How the web works?
What is HTML?
• HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language.

• HTML tags are keywords surrounded by angle brackets like <html>

• HTML tags normally come in pairs like <b> and </b>


Basic Structure of HTML Document
<html>
<head>
<title>This is the Title of the Page</title> Html header
</head>

<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web page is
Html body
displayed in the main browser window.</p>
</body>

</html>
A closer look at tags
Attribut Attribut
Element name value

<p class=”Intro” >Hello World!</p>

Closing
Tag
Opening Content
Tag
How to create a text?

● When creating a web page, you add tags (known


as markup) to the contents of the page.
● To learn HTML ,you will need to study various
tags and understand how they behave.
Text
Headings,paragraphs,nonbreaking spaces,Line
Breaks,preserve formatting…
HEADINGS
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

<h1>This is a Main Heading</h1>


<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
PARAGRAPHS
<p>
Surround the words that make up the paragraph with an opening
<p> tag and closing </p> tag.

<p>A paragraph consists of one or


more sentences
that form a...</p>
<p>Text is easier to understand
when it is split up
into units of text...</p>
LINE BREAKS
<br />

If you wanted to add a line break inside the middle of a


paragraph you can use the line break tag <br />

<p>The Earth<br />gets one


hundred tons heavier
every day<br />due to falling
space dust.</p>
Non Breaking spaces
When browsers comes across two or more spaces next to
each other it only displays one space .

<p>The moon is drifting away from


Earth.</p>
<p>The moon is drifting
away from Earth.</p>
<p>The moon is drifting away from

Earth.</p>
Horizontal lines
<hr>
● Horizontal lines are used to visually break-up sections
of a document.
<p>Venus is the only
planet that rotates
clockwise.</p>
<hr />
<p>Jupiter is bigger than
all the other planets
combined.</p>
Preserve Formatting
<pre>
Sometimes, you want your text to follow the exact format
of how it is written in the HTML document

<html>
<body>
<pre>
We are Computer science
students
</pre>
</body>
</html>
Questions?
LISTS
● There are lots of occasions when we
need to use lists.
● HTML provides us with two main
different types.
ORDERED LISTS
<ol>
The ordered list is created with the <ol> element.
<li>
Each item in the list is placed between an opening <li>
tag and a closing </li> tag.
<ol>
<li>Chop potatoes into quarters</li>
<li>Simmer in salted water for 15-20
minutes until tender</li>
<li>Heat milk, butter and nutmeg</li>
<li>Drain potatoes and mash</li>
<li>Mix in the milk mixture</li>
</ol>
UNORDERED LISTS
<ul>
The unordered list is created with the <ul> element.
<li>

Each item in the list is placed between an opening <li>


tag and a closing </li> tag.
<ul>
<li>1kg King Edward potatoes</li>
<li>100ml milk</</li>
<li>50g salted butter</li>
<li>Freshly grated nutmeg</</li>
<li>Salt and pepper to taste</li>
</ul>
Using Hyperlinks
Using the <a> tag :

External inks are created using the <a> element. You


specify which page you want to link to using the href
attribute.
<a href=”https://www.Google.com/”>Tap here</a>
For example :
<p>Movie Reviews:
<ul>
<li> <a href="http://www.empireonline.com">
Empire </a>
</li>
<li> <a href="http://www.metacritic.com">
Metacritic </a>
</li>
</ul>
</p>
Linking external resources
Using the <link> tag :

● The <link> tag is used to link external


resources.
● For example :
○ a stylesheet can be linked using the
<link> tag to apply styles to the HTML
document.
IMAGES
There are many reasons why you might want to
add an image to a web page:
● Visual Appeal
● Illustration
● Branding
● Product promotion
Adding images

<img src="images/picture.jpg" alt="World Cup Semi Final" >


Where to place images in your code?
1. Before a paragraph: The paragraph starts on a new line after the image.
2. Inside the start of a paragraph: the first row of text with the
bottom of the image.
3. In the middle of a paragraph: The image is placed between the
words of the paragraph that it appears in.
<img src="images/bird.gif" alt="Bird" width="100"
height="100" />
<p>There are around 10,000 living...</p>
<hr />
<p><img src="images/bird.gif" alt="Bird" width="100"
height="100" />There are around 10,000
living...</p>
<hr />
<p>There are around 10,000 living....<img
src="images/bird.gif" alt="Bird" width="100"
height="100" />Many species undertake long
distance...</p>
Questions?
TABLES
Why do we use tables ?

● Tables are commonly used in web design for organizing and


presenting data in a structured and easy-to-read format.
● Tables can be used to display various types of information such
as sports scores, financial data, schedules, final results…
Basic table Structure
<table>

The <table> elements is used to create a table. The contents of the table are written out row by
row.
<tr>

You indicate the start of each row using the opening <tr> tag.(the tr stands for table row)

it is followed by one or more <td> elements (one for each cell in that row). At the end of the
row you use a closing </ tr> tag.
<td>

each cell of a table is represented using a <td> element. (The td stands for table data)
<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
Table heading
<th>
The <th> element is used just like the <td> element but its
purpose is to represent the heading for either a column
or a row. For example:
Long tables
<thead>, <tbody>, <tfoot>

There are three elements that help distinguish between the


main content of the table and the first and last rows.
● <thead> : provides a separate header for the table.
● <tbody> : contains main content of the table.
● <tfoot> : creates a separate footer for the table.
Questions?
Forms

● Forms allow users to enter data such as text, numbers,


selections, and more, and then send that data to a server for
further processing.
● This can be used for a variety of purposes, such as creating an
account, submitting a search query, or placing an order.
Text input
<input>
It is used to create different form controls.
type=”text”

it creates a single line text input.


<form>
<p>Username:
<input type="text" />
</p>
</form>
Password input
<input> type=”password”

<form>
<p>Username:
<input type="text" />
</p>
<p>Password:
<input type="password" />
</p>
</form>
Text area
<textarea>

<form>
<p>What did you think of this gig?</p>
<textarea name="comments" cols="20"
rows="4">Enter your
comments...</textarea>
</form>
Radio button
<input> type=”radio”

<form>
<p>Please select your favorite genre:
<br />
<input type="radio" checked="checked" name=”music” value=”Rock” /> Rock
<input type="radio" name=”music” value=”Pop” /> Pop
<input type="radio"
name=”music” value=”Jazz” /> Jazz
</p>
</form>
Checkbox
<input> type=”checkbox”

<form >
<p>Please select your favorite music service(s):
<br />
<input type="checkbox" checked="checked" name=”service” value=”itunes”/>
iTunes
<input type="checkbox" name=”service” value=”lastfm”/> Last.fm
<input type="checkbox" name=”service” value=”Spotify”/> Spotify
</p>
</form>
Drop down list box
<select> & <option>

<form>
<p>What device do you listen to music on?</p>
<select name=”devices”>
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
Questions?
@khawla allak
@kawtar khallouq

@khawla allak
@kawtar khallouq

You might also like