Session 1 2

SESSION-
1
ENG/AHMED SHAMS
Definition of Website, Brwoser
 A website is a collection of publicly accessible, interlinked Web pages that share a

single domain name.
 Websites can be created and maintained by an individual, group, business or
organization to serve a variety of purposes.
 A browser is a software program used to locate, retrieve, and display content on

the World Wide Web
Introduction To Web Development
 Web development is building websites.

 like Facebook, Twitter.
 Web development has two disciplines:

 Front-end.
 Back-end.
 Front-end
 is visual and interactive aspects of a website.

 To learn front-end
 HTML(Hyper Text Markup language)
 CSS(Cascading Style Sheet)
 JS(Java script)
 Bootstrap
 Back-end
 all the logic behind the scenes that supports your website.
 To learn Back-end
 PHP/Python.
 SQL
Web Sites
Front-end Back-end
1. HTML 1. Php
2. CSS 2. Python
3. JS 3. database
4. BootStrap
Visual Studio Code
 Free source-code editor .
 provides support for various programming languages and features
 Help to build websites
 Link to download:
 https://code.visualstudio.com/
 HTML
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web
pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content

What is an HTML Element?
 An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
 The HTML element is everything from the start tag to the end tag.
 web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.
 A browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML Page Structure
Structure of Any page
 Headers.
 Paragraph.
 Links.
 Images.
Videos.
 Lists.
 Tables.
 Forms.
 Headers
 HTML headings are titles or subtitles that you want to display on a webpage.
 HTML headings are defined with the <h1> to <h6> tags.

EXAMPLE:
<html>
<head>
<title>
Session-1
</title>
</head>
<body>
<h1>Heading-1</h1>
<h2>Heading-2</h2>
<h3>Heading-3</h3>
<h4>Heading-4</h4>
<h5>Heading-5</h5>
<h6>Heading-6</h6>
</body>
</html>
Task
 Paragraph
 The HTML <p> element defines a paragraph.
 Example:
 <p>This is a paragraph.</p>
 cannot change the display by adding extra spaces or extra lines in your HTML
code.The browser will automatically remove any extra spaces and lines when the
page is displayed
 Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
 HTML Horizontal Rules
 The <hr> element is used to separate content (or define a change) in an HTML page
<html>
<head>
<title>
Session-1
</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
</body>
</html>
 HTML Line Breaks
 The HTML <br> element defines a line break.
<html>
<head>
<title>
Session-1
</title>
</head>
<body>
<p>This paragrap <br>
contains a lot of linein the source code <br>
but the browserignores it.</p>
</body>
</html>
Task
Task
 Links
 HTML links are hyperlinks.
 You can click on a link and jump to another document.
 Note: A link does not have to be text. A link can be an image or any
other HTML element!
 HTML Links – Syntax:

 <a href="url">link text</a>
Example
<html>
<head>
<title>PageOne</title>
</head>
<body> Page-1
<h1>Page One</h1>
<a href="C:\Users\LENOVO\Desktop\SESSION-2\page2.html">Go To Page Two</a><br>
<br>
<a href="https://www.google.com/index.html">GOOGLE Link</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> Page-2
<h1>Welcome To PAGE-2 TWO</h1>
<a href="index.html">Back to first page</a>
</body>
</html>
SESSION-
2
ENG/AHMED SHAMS
 HTML Images
• The HTML <img> tag is used to embed an image in a web page.
• The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
• The <img> tag has two required attributes:

• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
• The src Attribute specifies the path (URL) to the image.
• Example
• <img src="img_chania.jpg" >
• The alt attribute provides an alternate text for an

image.
• Example
• <img src="img_chania.jpg" alt="Flowers in Chania">
Exmple
<html>
<head>
</head>
<body>
<img src="car.jpg" alt="" width="600px" height="400px">
</body>
</html>
 HTML Videos
• The <video> tag is usetd to embed video content in a document.

• The <video> tag contains one or more <source> tags with different video
sources.
• Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Example
<html>
<head>
</head>
<body>
<h1> Cooking</h1>
<p> Cooking is a beautiful job it is allow us to eat</p>
<video width="600px" height="600px" controls>

<source src="video-1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like:
• name="value“
 Style Attribute
• The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.
• The HTML style attribute has the following syntax:

• <tagname style="property:value;">
 Background Color
• background-color property defines the background color for an HTML element.
 Example:
<body style="background-color:powderblue;">
<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>
</body>
 Text Color
• The CSS color property defines the text color for an HTML element:
 Example:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
 Text Size
• The CSS font-size property defines the text size for an HTML element:
 Example:
<h1 style="font-size:300px;">This is a heading</h1>
<p style="font-size:160px;">This is a paragraph.</p>
 Text Alignment
• The CSS text-align property defines the horizontal text alignment for an HTML element:
 Example:
<h1 style="text-align:right; color: brown; font-size: 60px;">This is a heading</h1>
<h1 style="text-align: center;color: cadetblue; font-size: 40px;">This is a heading2.</h1>
<h1 style="text-align: left;color:burlywood; font-size: 20px;">This is a heading3.</h1>

Session Task
SESSION-
3
ENG/AHMED SHAMS
SESSION CONTENT
 Tables in HTML.
 Lists in html
 Ordered List
 Un-Ordered List
 DIV element
 Class & ID
 Ways to make style for page

Tables in HTML
 A table in HTML consists of table cells inside rows and columns.
 HTML tables allow web developers to arrange data into rows and columns.
 EXAMPLE:
 Table Tags
Tag Description
<table>…</table> Define a table
<tr>….</tr> Used to make rows for table
<th>…..<th> Used to make headers(columns) for table
<td>….</td> Used to put data into cells in table
<table>
<tr>
 Example
<th> ID</th>
<th>Name </th>
<th> Phone</th>
ID Name Phone </tr>

<td>1</td>
1 Ahmed 0000000
<td>ahmed</td>
2 Shams 1111111
<td> 00000 </td>
3 adel 2222222
<tr>
<td> 2</td>
<td>shams</td>
<td>11111</td>
</tr>
<tr>
<td>3</td>
<td>adel</td>
<td>3333</td>
</tr>
</table>
 HTML Lists
 HTML lists allow web developers to group a set of related items in lists.
 Types of Lists:
 Ordered List.
 Un-Ordered List
 Example
 LIST Item Tag
 Any List (ordered list/ Un-Ordered List) consist of :

 Set Of List items.
 List Item Tag will be in

 Ordered List
 Un-ordered List
 List item Tage syntax:

<li>…….</li>
 Unordered HTML List
 Unordered list Syntax:

<ul>……</ul>
 Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Ordered HTML List
 Unordered list Syntax:

<ol>……</ol>
 Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
 HTML Description Lists
 A description list is a list of terms, with a description of each term.
 Description Lists Tags
Tag Description
<dl> tag defines the description list
<dt> tag defines the term (name)
<dd> tag describes each term
 EXAMPLE
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 HTML Forms
 An HTML form I
o is used to collect user input. The user input is most often sent to a server for
processing.
 Div Element
 The <div> tag defines a division or a section in an HTML document.
 The <div> tag is

• used as a container for HTML elements –
• which is then styled with CSS or manipulated with JavaScript.
 The <div> tag is easily styled by using the class or id attribute.

Session 1 2

Uploaded by

Copyright:

Available Formats

Session 1 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Session 1 2

Uploaded by

Copyright:

Available Formats

SESSION-

 A website is a collection of publicly accessible, interlinked Web pages that share a

 A browser is a software program used to locate, retrieve, and display content on

 Web development is building websites.

 Web development has two disciplines:

 is visual and interactive aspects of a website.

 HTML is the standard markup language for creating Web

 HTML describes the structure of a Web page

 HTML consists of a series of elements

 HTML elements tell the browser how to display the content

 HTML headings are defined with the <h1> to <h6> tags.

 HTML Links – Syntax:

<a href="index.html">Back to first page</a>

• The <img> tag has two required attributes:

• The alt attribute provides an alternate text for an

<img src="car.jpg" alt="" width="600px" height="400px">

• The <video> tag is usetd to embed video content in a document.

<video width="600px" height="600px" controls>

• Attributes provide additional information about elements

• Attributes are always specified in the start tag

• Attributes usually come in name/value pairs like:

• The HTML style attribute has the following syntax:

• background-color property defines the background color for an HTML element.

<h1 style="background-color:powderblue;">This is a heading</h1>

<h1 style="text-align: center;color: cadetblue; font-size: 40px;">This is a heading2.</h1>

<h1 style="text-align: left;color:burlywood; font-size: 20px;">This is a heading3.</h1>

 Ways to make style for page

ID Name Phone </tr>

 Any List (ordered list/ Un-Ordered List) consist of :

 List Item Tag will be in

 List item Tage syntax:

 Unordered list Syntax:

 Unordered list Syntax:

 A description list is a list of terms, with a description of each term.

 Description Lists Tags

 The <div> tag is

 The <div> tag is easily styled by using the class or id attribute.

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.