HTML Basic Training for beginners - Learn HTML coding
mithizzzz
15 views
30 slides
Jul 15, 2024
Slide 1 of 30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
About This Presentation
HTML
Slide Content
HTML TRAINING Session 1
Agenda Day 1 - Topics Introduction to HTML Why HTML? Structure of HTML 2. Formatting Tags Basic Formatting Tags Setting Fonts 3. Lists and Links Unordered, Ordered and Definition List Links Mailto 4. Images Adding Images Hyper linking Images
Introduction to HTML HTML is the language you use to create WebPages. Left to themselves, web browsers would take the text and images in your web pages and wrap them up into what looks like a single paragraph without any line breaks. With HTML, you act as an editor, marking up a page to indicate its format, telling the web browser where you want a new line to begin or how you want text or images aligned. In short HTML is all about specifying the structure and format of your Web page.
What is markup language? The HTML includes a collection of markup elements and attributes that describe the letter’s contents: The <html> element defines the document as an HTML document. The <head> element creates a header section for the document, and the <title> element inside of it defines a document title that will be displayed in the browser’s title bar. The <body> element holds the actual text that will display in the browser window.
Structure of HTML <HTML> <HEAD> <TITLE> Web Page number one! </TITLE> </HEAD> <BODY> Welcome to HTML </BODY> </HTML> Title is reflected here . Body is reflected here .
Tags And Attributes Tags: Anything enclosed in angle brackets i.e. < and > are called tags. Example: <HTML> tag is used to indicate that this webpage is written in HTML. Every opening tag <HTML> should have an ending tag as well </HTML>. Collectively, a starting tag, an ending tag and everything between them make up an HTML element. Attributes: HTML tags tell web browsers how to format and organize web pages, but there’s more to tell i.e. you can customize most tags using attributes. An Attributes is a keyword that you use in an opening tag to give more information to the web browser. <TAGNAME ATTRIBUTE = VALUE>
Formatting Tags
Basic Formatting Tags 1) Headings: There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from h1 for the most important, to h6 for the least important. Code for this would be : <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> OUTPUT
2) Bold: You specify bold text with the <b> or <Strong> tag. Code: <b>This text is bold.</b> OR <Strong> This text is bold </strong> Output
3) Italics: You specify italic text with the <i> tag or <em> tag. Code: <i>This text is italicized.</i> OR <em>This text is italicized using emphasize tag</em>
3) Underline: You specify underline text with the <u> tag. Code: <u>This text needs importance.</u> Example: <u>This text needs importance.</u>
4) Line Breaks You specify line break with the <br> tag. Code: <p>Here is a...<br />line break.</p>
5) Horizontal Rule Code: Here's a horizontal rule... <hr size="2" color="#FF0000"/> ...that was a horizontal rule :)
6) Center: This tag aligns the text in center Code: <Center> Welcome to HTML Basics </center>
6) Paragraph: When you want to set paragraphs on our WebPages, use paragraph tag. Code: <p> Welcome to HTML Basics </p> <p> Introduction</p>
7) Fonts: You use FONT tag to set text color, font face and size. Code: <Font face=“Verdana” color="maroon" size =4>If you notice, we have used attributes for the font tag. <em>Attributes</em> are nothing but properties added to the respective tags.</font>
Aligning of Text: <p><Font face=“Verdana” color="maroon" size =4>If you notice, we have used attributes for the font tag. <em>Attributes</em> are nothing but properties added to the respective tags.</font></p> <p align="right">If you notice, we have used attributes for the font tag.</p> <p align="left">If you notice, we have used attributes for the font tag</p> <p align="center">If you notice, we have used attributes for the font tag</p>
Lists
Creating lists: How would you display a list in a Web page? Simply by using ordered or unordered lists. Unordered list display a bullet in front of each list items. Tag: <UL> <LI></LI> </UL> Ordered list display the items in numerical or alphabetical terms. Tag : <OL> <LI></LI> </OL> Other type of list is Definition list, though not used much. Purpose: Organizes terms and their definitions in pairs. Tag: <DL> <DT>MBA</DT> <DD>Masters in Business Administration</DD> </DL>
Code for Ordered list <Center>Basics of HTML</Center> <ol type="A"> (Other types 1, A, a, i, I) <li> Introduction to HTML</li> <li>Formatting Tags</li> <li>Lists and Links</li> <li>Images</li> </ol>
Unordered List <Center>Basics of HTML</Center> <ul type="circle"> (other types are square, disc) <li> Introduction to HTML</li> <li>Formatting Tags</li> <li>Lists and Links</li> <li>Images</li> </ul>
Definition List <DL> <DT>M.B.A</DT> <DD> Masters Of Business Administration</DD><br> <DT>HTML</DT> <DD> HyperText Markup Language</DD> </DL>
Adding Images and Links
Creation of Links: Links , otherwise known as hyperlinks , are defined using the <a> tag - otherwise known as the anchor element. To create a hyperlink, you use the a tag in conjunction with the href attribute ( href stands for Hypertext Reference). The value of the href attribute is the URL , or, location of where the link is pointing to. Types of links: External Links: Links which take us to another webpage/site. Internal Links: Links which take us to a particular section within a webpage/website. Graphical Links: Images which are linked instead of text ( will be covered in next topic). Hypertext references can use absolute URLS, relative URLs: Absolute :This refers to a URL where the full path is provided. Relative: This refers to a URL where only the path, relative to the current location , is provided.
External Links: Code: Visit the <a href ="https://deloittenet.deloitte.com/PC/PracticeComm/Industries/CIP/PIP/Pages/home.aspx"> Process & Industrial Products Site</a>
Internal Links: 1. Identify and mark the places in your document that you want to link to. For example, mark the top of your page or its major headings. 2. Link to those spots. When you create a link from one Web page to another, you use URLs to define the location of the page you want to link to. However, URLs apply to a whole page, not segments of a page. If you want to direct your links to a specific place on the page, you first have to mark the spot you want to link to. You use the anchor element with the name attribute to make your mark: <a name="top"></a> Notice that there isn't any text between the opening and closing tags. That's because an anchor tag that marks a spot doesn't need text to hang the spot on. Instead, you simply create an empty anchor tag and you've created a spot in your document that you can link to. To link to this spot, you use a slightly different URL than you've seen before: <a href="#top">Back to top</a> The pound sign (#) indicates that you're pointing to a spot on the page, rather than another page.
Place a named anchor tag here i.e. <a name="TOP"></a> (We have identified the spot) Add a hyperlink here in order to click and go to the top of the page <a href="#TOP">Back to Top</a>
Mailto Links: You can specify subject line and also add users in the cc and bcc fields. Code: <a href="mailto:<email id>? cc=mailto:<email id>& bcc=mailto:<email id>& subject=summer party& body=you are invited to a big summer party!"> Send Mail </a>
Adding Images to a Webpage: Images are stored in files outside your WebPages, which means you will need to upload them to your Internet Service Provider as files separate from your WebPages. Tag: <IMG> <body> <center> <h3> Working with images</h3> <img src=“url" alt="HTML" width =252 height=252 /> </center> </body>
Graphical Link: You can also add a link to an image. Code: <body> <center> <h3> Hyper linking an image</h3> <a href= "http://www.google.co.in/"> <img src="../images.jpg" alt="HTML" width =152 height=100/></a> </center> </body>
Tags
Download
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 15
- Slides 30
- Age 506 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
47 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
21 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views