Web Programming 1_Lab_1
Web Programming Course
HTML
CSS
JavaScript
What is HTML
What is HTML
What is HTML
What I Need
What I Need
• Text editor
• Web browser
Web browser
• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Safari
• Internet Explorer
• Yandex Browser
• Opera
HTML Structure
HTML page Structure
Title
• <!DOCTYPE html>
• <html>
• <head>
• <title> Page 1 </title>
• </head>
• <body>
• </body>
• </html>
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag
• <p>This is a paragraph.</p>
Paragraph
• <!DOCTYPE html>
• <html>
• <head>
• <title> Page 1 </title>
• </head>
• <body>
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>
• </body>
• </html>
Paragraph
• <!DOCTYPE html>
• <html>
• <head>
• <title> Page 1 </title>
• </head>
• <body>
• <p>This is P
• Hello
• Again
• From
• Paragraph </p>
•
• </body>
• </html>
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines
the least important heading:
• <h1>This is heading 1</h1>
HTML Headings
• <!DOCTYPE html>
• <html>
• <head>
• <title> Page 1 </title>
• </head>
• <body>
• <h1>My Head 1</h1>
• <h2>My Head 2</h2>
• <h3>My Head 3</h3>
• <h4>My Head 4</h4>
• <h5>My Head 1</h5>
• <h6>My Head 6</h6>
• </body>
• </html>
First Page
• <!DOCTYPE html>
• <html>
• <head>
• <title>Our First Page</title>
• </head>
• <body>
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
• </body>
• </html>
Task
Task 1
Task 1
• <!DOCTYPE html>
• <html>
• <head>
• <title>Our Second page</title>
• </head>
• <body>
• <h1> Story title </h1>
• <p>This is paragarph sssssssssssssssssss</p>
• </body>
• </html>
HTML Comments
HTML Comment Tag
• syntax:
• <!-- Write your comments here -->
• <!-- This is a comment -->
HTML Comment Tag
• <!DOCTYPE html>
• <html>
• <head>
• <title>Our Second page</title>
• </head>
• <body>
• <!-- This is a comment -->
• <p>This is a paragraph.</p>
• <!-- Remember to add more information here -->
• </body>
• </html>
Hide Content
• Comments can be used to hide content.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Our Second page</title>
• </head>
• <body>
• <p>This is a paragraph.</p>
• <!-- <p>This is another paragraph </p> -->
• <p>This is a paragraph too.</p>
• </body>
• </html>
Task
Task 2
Task 2
• <!DOCTYPE html>
• <html>
• <head>
• <title>Rana</title>
• </head>
• <body>
• <!--This is My Name-->
• <h1>Rana Mohamed</h1>
• <!--This is paragraph-->
• <p>I graduated from computers and artificial intelligence</p>
• </body>
• </html>
Font Tag
Font
• Font tag has three attributes :
o Color
o Face --- > defines types of font
o Size
• -→ called entity
HTML Horizontal Rules
• The <hr> tag defines a thematic break in an HTML page,
and is most often displayed as a horizontal rule.
• <hr>
HTML Horizontal Rules
• <!DOCTYPE html>
• <html>
• <head>
• <title>page</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.
• Use <br> if you want a line break (a new line) without starting a
new paragraph
• The <br> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
• <!DOCTYPE html>
• <html>
• <head>
• <title>page</title>
• </head>
• <body>
• <p>This is<br>a paragraph<br>with line breaks.</p>
• </body>
• </html>
HTML Formatting Elements
Bold text & Italic text
• The HTML <b> element defines bold text, without any extra
importance.
• The HTML <i> element defines a part of text in an alternate
voice or mood. The content inside is typically displayed in italic
Bold text & Italic text
• <!DOCTYPE html>
• <html>
• <head>
• <title>page</title>
• </head>
• <body>
• <b>This text is bold</b>
• <br>
• <i>This text is italic</i>
• </body>
• </html>
