abhinandankondekar2
15 views
23 slides
May 22, 2024
Slide 1 of 23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
About This Presentation
PHP, HTML
Size: 208.93 KB
Language: en
Added: May 22, 2024
Slides: 23 pages
Slide Content
What is HTML? H TML s t a nd s f o r Hy p e r T e x t M a r ku p L a n g u age HTML is the standard markup language for creating Web pages H T ML d e s c r i b e s the s t r u c t u r e o f a W e b p a ge HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as " this is a heading", "this is a paragraph", "this is a link" , etc .
W h at I s A W e b p ag e ? A webpage is the result of a team working together. A Web Server can be hardware/ software that let you deliver the webpage to your browser. A browser reads and decodes the instructions, display exciting content on the screen. The browser gets all the information asked for from the webserver, these information are stored as HTML document Inside the webserver.
HTML consists of 2 important parts which are: Document Creation: this is what the user will see. Tags: this is how they see it. HTML comprises of Tags which are: Tag <html>: this tag <html> is the head of the family . It’s from this tag that the browser recognizes, it’s an HTML document <html> serves as the opening tag while </html> serves as the closing tag, So therefore for every opening tag <html> there is a closing tag </html>
The <!DOCTYPE html> declaration defines that this document is an HTML5 document The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a large heading The <p> element defines a paragraph
W h at i s an H T M L E l e m en t? 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: <h1> My First Heading </h1> <p> My first paragraph </p>
Start tag Element content End tag <h1> My First Heading </h1> <p> My first paragraph. </p> < br > none none Some HTML elements have no content (like the < br > element). These elements are called empty elements . Empty elements do not have an end tag!
TO Create Webpage L e a r n H TML U s i n g N o te p a d or T e x t E d it https://notepad-plus-plus.org/downloads/v8.2/ Windows+R = type “notepad” in run command and enter, notepad will open
<html> <head> <title> Sanjivani College of Engineering </title> </head> <body> <h1> Electrical Engineering </h1> <p> I m from kopargaon , I m living in Maharastra </p> <p> I have completed my schooling in Sanjivani Academy, Kopargaon </p> </body> </html
HTML TAGS <!DOCTYPE HTML> < h t ml >… . < / h t ml > w h i c h i s a l so kno w n a s R OOT E L E M E N T . A ll Html web pages starts with this root element. <title>….</title> which is also known as the TITLE PAGE. <body>….</body> which is also known as DOCUMENT HEAD In the <body> tag, the tag paragraph is important when making a webpage. Denotation of paragraph is <p> and </p>.
T h e T i t l e T a g Just like the title of MR. or MRS. Adds meaning to your name, similarly you might have noticed the text in your browser window ? That’s the use of title tag. Denotation : <title> </title> Location : It’s placed inside the head tag. Visibility : Not on the main page. Usage : Lets you provide special instructions to the browser
The break tag The break tag lets you start a sentence from a new line in HTML. Denotation : < br > Location : It is placed inside the body tag. <!DOCTYPE html> <html> <body> <p>This is a Heading < br > This is a paragraph. <p> </body> </html>
Bold, Italics, Underline Tags The Bold Tag D e n o ta t i o n : < b> < /b> Location : It’s placed inside the body tag. T he It a l ic T ag Denotation : <i> </i> Location : It’s placed inside the body tag. The Underline Tag Denotation : <u> </u> Location : It’s placed inside the body tag.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p> <b> welcome to Sanjivani College of Engineering </b> < br > < i> I am Studying in Electrical Engineering </i> < br > <u> This is my place kopargaon </u> <p> </body> </html>
Headings In HTML We tend to prioritize the important stuff. In HTML we make use of headings. Denotation : < h1>….</h1>, <h2>…..</h2>, <h3>…..</h3>, <h4>……</h4>, <h5>……</h5>, <h6>…….</h6> Location: It’s placed inside the body tag. Usage: <h1> to <h6>- arranged on basis of priority (<h1>- highest)
<!DOCTYPE html> <html> <body> <h1> Welcome to Sanjivani College of Engineering </h1> <h2> Welcome to Sanjivani College of Engineering </h2> <h3> Welcome to Sanjivani College of Engineering </h3> <h4> Welcome to Sanjivani College of Engineering </h4> <h4> Welcome to Sanjivani College of Engineering </h4> <h5> Welcome to Sanjivani College of Engineering </h5> <h6> Welcome to Sanjivani College of Engineering </h6> </body> </html>
T h e I m a ge T a g D e n o ta t i o n : < i m g /> Location : It’s placed inside the body tag. Usage : Let’s help you add an image to the page. The tag is used like this: < img src =“image’s path’’/> S rc i s an a t t r i b u te t o in c l u de the i m a g e’ s p a th An attribute Provides additional information about your html tag. Note : the image’s path can also be an image URL.
<!DOCTYPE html> <html> <body> <h1> Welcome to Sanjivani College of Engineering </h1> <p> Department of Mechatronics Engineering </p> < img src ="G:\SRES\Jan 2022\IT for engg \Week4-HTML\image tag.jpg"/> </body> </html>
T h e D i v i s i o n T a g A simple straight webpage, will it look good and be appealing? Of course not. Hence, the div tag comes into the picture Denotation : <div> </div> Location : It’s placed inside the body tag Usage: Let’s get you to divide the page into sections, especially with CSS. It will not have any visible output now.