Day 2 - Web_Development [basic HTML tags and their functionalities].pptx
atiqahmad1013
9 views
18 slides
Sep 06, 2024
Slide 1 of 18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
About This Presentation
Web Development - Basics of HTML
Slide Content
Web Development Day 02 [03-09-2024] Introduction to HTML: Structure and content of web pages. Learning basic HTML tags and their functionalities. Hands-on exercises: Creating simple HTML documents.
Introduction to 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 and are not case sensitive HTML elements tell the browser how to display the content
A Simple HTML Document < !DOCTYPE html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html >
Example Explained 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
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: < 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
Writing HTML code in a Text Editor Step 1: Open Notepad Step 2: Write Some HTML Code Step 3: Save the HTML Page with .html extension Step 4: View the HTML Page in a Browser
HTML Headings < h1 > This is heading 1 < /h1 > < h2 > This is heading 2 < /h2 > < h3 > This is heading 3 < /h3 > < h4 > This is heading 4 < /h4 > < h5 > This is heading 5 < /h5 > < h6 > This is heading 6 < /h6 >
HTML Paragraphs HTML paragraphs are defined with the <p> tag: <p>This is a paragraph.</p> <p>This is another paragraph.</p>
Empty HTML Elements HTML elements with no content are called empty elements. The < br > tag defines a line break, and is an empty element without a closing tag: < p > This is a < br > paragraph with a line break. < /p >
HTML Links HTML links are defined with the <a> tag: < a href =" https://www.w3schools.com/html/html_intro.asp "> This is a link < /a > The link's destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements.
HTML Images HTML images are defined with the < img > tag. The source file ( src ), alternative text (alt), width, and height are provided as attributes: The < img > tag should also contain the width and height attributes, which specify the width and height of the image (in pixels): < img src ="img_girl.jpg" width ="500" height ="600"> The alt Attribute The required alt attribute for the < img > tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader. < img src ="img_girl.jpg" alt ="Girl with a jacket">
How to View HTML Source Have you ever seen a Web page and wondered "Hey! How did they do that?" View HTML Source Code: Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This will open a new tab containing the HTML source code of the page. Inspect an HTML Element: Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
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“ The < img > tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: < img src ="img_girl.jpg"> The style attribute is used to add styles to an element, such as color, font, size, and more. < p style =" color:red ;"> This is a red paragraph. < /p >
There are two ways to specify the URL in the src attribute: 1. Absolute URL - Links to an external image that is hosted on another website. Example: src ="https://www.w3schools.com/images/img_girl.jpg". Notes : External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed. 2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src ="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src ="/images/img_girl.jpg". Tip : It is almost always best to use relative URLs. They will not break if you change domain.
The HTML <pre> Element The <pre> element in HTML displays the text as preformatted. It does not change the format of the text. <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre>
HTML Comments HTML comments are not displayed in the browser, but they can help document your HTML source code. <!-- This is a comment --> < p > This is a paragraph. < /p > <!-- Remember to add more information here --> <!-- <p>Look at this cool image:</p> < img border="0" src ="pic_trulli.jpg" alt=" Trulli "> -->
Summary so far All HTML elements can have attributes The href attribute of <a> specifies the URL of the page the link goes to The src attribute of < img > specifies the path to the image to be displayed The width and height attributes of < img > provide size information for images The alt attribute of < img > provides an alternate text for an image The style attribute is used to add styles to an element, such as color, font, size, and more
Exercises and Homework Create a basic web page having the following elements: Headings, Paragraph, Links, Pre, Comments, Etc.
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 9
- Slides 18
- Age 450 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
28 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views