Scribd
Upload
14 views

Intoduction To HTML

Uploaded by

jahahajahajiqaa
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
14 views

Intoduction To HTML

Uploaded by

jahahajahajiqaa
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/ 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