for paragraphs, for links, for images, and for unordered and ordered lists, and for buttons. Attributes provide additional information about elements, such as the href attribute specifying the link address for tags and the src attribute specifying the image source for tags."> for main headings, for paragraphs, for links, for images, and for unordered and ordered lists, and for buttons. Attributes provide additional information about elements, such as the href attribute specifying the link address for tags and the src attribute specifying the image source for tags."> Address: [go: up one dir, main page] Include Form Remove Scripts Session Cookies Open navigation menuClose suggestionsSearchSearchenChange LanguageUploadSign inSign inDownload free for days0 ratings0% found this document useful (0 votes)72 views52 pagesWhat Is HTML?: HTML Is The Standard Markup Language For Creating Web PagesHTML is the standard markup language used to create web pages. It uses tags to define the structure of a web page and elements like headings, paragraphs, links, images, lists, and buttons. Common HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists, and <button> for buttons. Attributes provide additional information about elements, such as the href attribute specifying the link address for <a> tags and the src attribute specifying the image source for <img> tags.Uploaded byvincent bacusAI-enhanced title and descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PPTX, PDF, TXT or read online on ScribdDownloadSaveSave What is HTML Vincent For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReport0 ratings0% found this document useful (0 votes)72 views52 pagesWhat Is HTML?: HTML Is The Standard Markup Language For Creating Web PagesHTML is the standard markup language used to create web pages. It uses tags to define the structure of a web page and elements like headings, paragraphs, links, images, lists, and buttons. Common HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists, and <button> for buttons. Attributes provide additional information about elements, such as the href attribute specifying the link address for <a> tags and the src attribute specifying the image source for <img> tags.Uploaded byvincent bacusAI-enhanced title and descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PPTX, PDF, TXT or read online on ScribdCarousel PreviousCarousel NextDownloadSaveSave What is HTML Vincent For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReportDownload nowDownloadYou are on page 1/ 52SearchFullscreenWhat is HTML?HTML is the standard markup language for creating Web pages.•HTML stands for Hyper Text Markup Language•HTML describes the structure of Web pages using markup•HTML elements are the building blocks of HTML pages•HTML elements are represented by tags•HTML tags label pieces of content such as "heading","paragraph", "table", and so on•Browsers do not display the HTML tags, but use them to renderthe content of the page You can create your own website HTML Document<!DOCTYPE html> • The <!DOCTYPE html> declaration<html> defines this document to be HTML5<head> • The <html> element is the root<title>Page Title</title> element of an HTML page</head> • The <head> element contains meta<body> information about the document • The <title> element specifies a title<h1>My First Heading</h1> for the document<p>My first paragraph.</p> • The <body> element contains the visible page content</body> • The <h1> element defines a large heading</html> • The <p> element defines a paragraph HTML TagsHTML tags are element names surrounded by angle brackets: <tagname>content goes here...</tagname>• HTML tags normally come in pairs like <p> and </p>• The first tag in a pair is the start tag, the second tag is the end tag• The end tag is written like the start tag, but with a forward slash inserted before the tag nameTip: The start tag is also called the opening tag, and the end tagthe closing tag. Web BrowsersThe purpose of a webbrowser (Chrome, IE,Firefox, Safari) is to readHTML documents anddisplay them.The browser does notdisplay the HTML tags, butuses them to determinehow to display thedocument: HTML Page Structure<html> <head> <title>Page title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body></html>Note: Only the content inside the <body> section (the red text above) isdisplayed in a browser. The <!DOCTYPE> DeclarationThe <!DOCTYPE> declaration represents the document type, andhelps browsers to display web pages correctly.It must only appear once, at the top of the page (before any HTMLtags).The <!DOCTYPE> declaration is not case sensitive.The <!DOCTYPE> declaration for HTML5 is:<!DOCTYPE html> HTML VersionsVersion YearHTML 1991HTML 2.0 1995HTML 3.2 1997HTML 4.01 1999XHTML 2000HTML5 2014 How to write HTML?Write HTML Using Notepad or TextEditWeb pages can be created and modified by using professional HTMLeditors.However, for learning HTML we recommend a simple text editor likeNotepad (PC) or TextEdit (Mac).We believe using a simple text editor is a good way to learn HTML.Follow the four steps below to create your first web page withNotepad or TextEdit. Step 1: Open Notepad (PC)• Windows 8 or later:• Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.• Windows 7 or earlier:• Open Start > Programs > Accessories > Notepad Step 2: Write Some HTML• <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Step 3: Save theHTML PageSave the file on yourcomputer. Select File >Save as in the Notepadmenu.Name thefile "index.htm" andset the encodingto UTF-8 (which is thepreferred encoding forHTML files). You can use either .htm or .html as file extension. There is no difference, it is up to you. Step 4: View theHTML Page in YourBrowserOpen the savedHTML file in yourfavorite browser(double click onthe file, or right-click - and choose"Open with"). HTML Basic ExamplesHTML Documents• All HTML documents must start with a document type declaration: <!DOCTYPE html>.• The HTML document itself begins with <html> and ends with </html>.• The visible part of the HTML document is between <body> and </body>. Example<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first 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: Sample<h1>This is heading 1</h1> This is heading 1<h2>This is heading 2</h2> This is heading 2<h3>This is heading 3</h3> This is heading 3 HTML ParagraphsHTML paragraphs are defined with the <p> tag:Example<p>This is a paragraph.</p><p>This is another paragraph.</p>This is a paragraph.This is another paragraph. HTML LinksHTML links are defined with the <a> tag:Example<a href="https://www.w3schools.com">Thisis a link</a>HTML LinksHTML links are defined with the a tag:This is a linkThe link's destination is specified in the href attribute.Attributes are used to provide additional information about HTML elements. HTML ImagesHTML images are defined with the <img> tag.The source file (src), alternative text (alt), width,and height are provided as attributes:Example<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> How to insert image using HTML CodeCode Result<!DOCTYPE html> HTML Images<html><body> HTML images are defined with the img tag:<h2>HTML Images</h2><p>HTML images are defined with theimg tag:</p><img src="w3schools.jpg"alt="W3Schools.com" width="104"height="142"></body></html> HTML ButtonsHTML buttons are defined with the <button> tag:Example<button>Click me</button> ExampleHTML Code Result• <!DOCTYPE html> HTML Buttons• <html>• <body> HTML buttons are defined with the button tag:• <h2>HTML Buttons</h2> Click me• <p>HTML buttons are defined with the button tag:</p>• <button>Click me</button>• </body>• </html> HTML Lists HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):• Example• <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Sample Code<!DOCTYPE html> An Unordered HTML List<html><body> • Coffee<h2>An Unordered HTML List</h2> • Tea • Milk <ul> <li>Coffee</li> An Ordered HTML List <li>Tea</li> 1. Coffee <li>Milk</li></ul> 2. Tea 3. Milk<h2>An Ordered HTML List</h2><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol></body></html> HTML Elements• An HTML element usually consists of a start tag and end tag, with the content inserted in between:• <tagname>Content goes here...</tagname>• The HTML element is everything from the start tag to the end tag:• <p>My first paragraph.</p> Start tag Element content End tag<h1> My First Heading </h1><p> My first paragraph. </p><br> • The <html> element defines the whole document.• It has a start tag <html> and an end tag </html>.• The element content is another HTML element (the <body> element).<html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> • The <body> element defines the document body.• It has a start tag <body> and an end tag </body>.• The element content is two other HTML elements (<h1> and <p>).• <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> • The <h1> element defines a heading.• It has a start tag <h1> and an end tag </h1>.• The element content is: My First Heading.• <h1>My First Heading</h1> • The <p> element defines a paragraph.• It has a start tag <p> and an end tag </p>.• The element content is: My first paragraph.• <p>My first paragraph.</p> Empty HTML Elements• HTML elements with no content are called empty elements.• <br> is an empty element without a closing tag (the <br> tag defines a line break).• Empty elements can be "closed" in the opening tag like this: <br />. HTML AttributesAttributes provide additional information about HTMLelements.HTML Attributes• All HTML elements can have attributes• Attributes provide additional information about an element• Attributes are always specified in the start tag• Attributes usually come in name/value pairs like: name="value" The href Attribute• HTML links are defined with the <a> tag. The link address is specified in the href attribute:Example<a href="https://www.w3schools.com">This is a link</a> <!DOCTYPE html> The href Attribute<html><body> HTML links are defined with the a tag. The link <h2>The href Attribute</h2> address is specified in the <p>HTML links are defined with the href attribute:a tag. The link address is specified inthe href attribute:</p> This is a link<ahref="https://www.w3schools.com">This is a link</a></body></html> The src Attribute• HTML images are defined with the <img> tag.• The filename of the image source is specified in the src attribute:Example<img src="img_girl.jpg"> <!DOCTYPE html> The src Attribute<html> HTML images are defined with<body> the img tag, and the filename of the image source is specified in<h2>The src Attribute</h2> the src attribute:<p>HTML images are definedwith the img tag, and thefilename of the image source isspecified in the src attribute:</p><img src="img_girl.jpg"width="500" height="600"></body></html> The width and height Attributes• Images in HTML have a set of size attributes, which specifies the width and height of the image:Example<img src="img_girl.jpg" width="500" height="600"> Size Attributes<!DOCTYPE html> Images in HTML have a set of<html> size attributes, which specifies the<body> width and height of the image:<h2>Size Attributes</h2><p>Images in HTML have a set ofsize attributes, which specifiesthe width and height of theimage:</p><img src="img_girl.jpg"width="500" height="600"></body></html> The alt Attribute• The alt attribute specifies an alternative text to be used, when an image cannot be displayed.• The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.Example<img src="img_girl.jpg" alt="Girl witha jacket"> <!DOCTYPE html> The alt Attribute<html> The alt attribute should reflect the image content, so users who cannot<body> see the image gets an understanding of what the image contains:<h2>The alt Attribute</h2><p>The alt attribute should reflectthe image content, so users whocannot see the image gets anunderstanding of what the imagecontains:</p><img src="img_girl.jpg" alt="Girl witha jacket" width="500" height="600"></body></html> The style Attribute• The style attribute is used to specify the styling of an element, like color, font, size etc.Example<p style="color:red">I am aparagraph</p> <!DOCTYPE html> The style Attribute<html> The style attribute is used to<body> specify the styling of an element, like color:<h2>The style Attribute</h2> I am a paragraph.<p>The style attribute is usedto specify the styling of anelement, like color:</p><p style="color:red">I am aparagraph.</p></body></html> HTML Headings• Headings are defined with the <h1> to <h6> tags.• <h1> defines the most important heading. <h6> defines the least important heading.Example <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> How to adjust headingsBigger Headings• Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:Example• <h1 style="font- size:60px;">Heading 1</h1> <!DOCTYPE html><html> Heading 1<body> You can change the size of a heading with the style attribute, using the font-size property.<h1 style="font-size:60px;">Heading 1</h1><p>You can change the size ofa heading with the styleattribute, using the font-sizeproperty.</p></body></html> HTML ParagraphsThe HTML <p> element definesa paragraph:Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> <!DOCTYPE html> This is a paragraph.<html> This is a paragraph.<body> This is a paragraph.<p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p></body></html> Don't Forget the End Tag• Most browsers will display HTML correctly even if you forget the end tag:Example<p>This is a paragraph.<p>This is another paragraph. 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:Example<p>This is<br>a paragraph<br>withline breaks.</p> <!DOCTYPE html> This is<html> a paragraph<body> with line breaks<p>This is<br>aparagraph<br>with linebreaks</p></body></html> Sample HTML<!doctype html> The Fish Web Site<html> Welcome to the fish web site.<head> Everything you want to know<title> My Web Page </title> about fish is in this site.</head> This is a Section on Bass Fish<body><h1> The Fish Web Site </h1> Bass Fish live in lakes.<p> Welcome to the fish web site.Everything you want to know aboutfish is in this site. </p><h2> This is a Section on Bass Fish</h2><p> Bass Fish live in lakes. </p></body></html>You might also likeRespiratia Holotropica Terapie Si Explorare Interioara Romanian EditionPDF0% (1)Respiratia Holotropica Terapie Si Explorare Interioara Romanian Edition2 pagesThe Physiology of Money Marathi - Sunil Wani PDFNo ratings yetThe Physiology of Money Marathi - Sunil Wani 175 pagesUltra HTML ReferenceFrom EverandUltra HTML ReferenceMike Abelar2/5 (1)HTML NotesPDFNo ratings yetHTML Notes23 pagesCPC06 Advance Web Development2PDFNo ratings yetCPC06 Advance Web Development236 pagesWhat Is HTML?: Example ResultPDFNo ratings yetWhat Is HTML?: Example Result19 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML32 pagesHypertext Markup LangaugePDFNo ratings yetHypertext Markup Langauge9 pagesHTMLPDFNo ratings yetHTML100 pagesHTMLPDFNo ratings yetHTML61 pagesEditors: Write HTML Using Notepad or TexteditPDFNo ratings yetEditors: Write HTML Using Notepad or Textedit53 pagesHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLPDFNo ratings yetHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML10 pagesHTML Css JsPDFNo ratings yetHTML Css Js491 pagesHTMLPDF100% (4)HTML108 pagesHTML TutorialPDFNo ratings yetHTML Tutorial22 pagesHyperText Markup Language New LessonPDFNo ratings yetHyperText Markup Language New Lesson169 pagesHTML w3 SchoolsPDFNo ratings yetHTML w3 Schools30 pagesHTML NotePDFNo ratings yetHTML Note39 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML63 pagesHTML Is The Standard Markup Language For Creating Web PagesPDFNo ratings yetHTML Is The Standard Markup Language For Creating Web Pages28 pages01 HTMLPDFNo ratings yet01 HTML96 pagesWDP Material OnePDFNo ratings yetWDP Material One97 pagesHTMLPDFNo ratings yetHTML84 pagesHTMLPDFNo ratings yetHTML14 pagesHTML&CSS BellsPDFNo ratings yetHTML&CSS Bells230 pagesLecture 02 - HTML Basics1PDFNo ratings yetLecture 02 - HTML Basics174 pagesWeb DevelopmentPDFNo ratings yetWeb Development32 pagesHTML 1PDFNo ratings yetHTML 133 pages!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLPDFNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML11 pages03 HTMLPDFNo ratings yet03 HTML113 pagesHTML Notes PDFNo ratings yetHTML Notes 30 pagesMy HTML NotesPDF100% (1)My HTML Notes43 pagesHTML Lesson 1PDFNo ratings yetHTML Lesson 15 pagesHTML TutorialPDFNo ratings yetHTML Tutorial200 pagesHTML5 TutorialPDFNo ratings yetHTML5 Tutorial32 pagesHTML IntroductionPDFNo ratings yetHTML Introduction26 pagesHTML TutorialPDFNo ratings yetHTML Tutorial63 pagesHTML-Chapter 1 - 4PDF100% (1)HTML-Chapter 1 - 4126 pagesLecture1 HTMLPDFNo ratings yetLecture1 HTML70 pagesHướng dẫn lập trình web - HTMLPDFNo ratings yetHướng dẫn lập trình web - HTML296 pagesHTML Documents: ExamplePDFNo ratings yetHTML Documents: Example3 pagesBcac501 - It - Part-1-HtmlPDFNo ratings yetBcac501 - It - Part-1-Html117 pagesHTML BasicPDFNo ratings yetHTML Basic92 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML99 pagesHTML IntroPDFNo ratings yetHTML Intro137 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML66 pagesWrite HTML Using Notepad or Textedit: ExamplePDFNo ratings yetWrite HTML Using Notepad or Textedit: Example23 pagesHTML NotesPDFNo ratings yetHTML Notes21 pagesUnit 3 HTML - RM - PDFPDFNo ratings yetUnit 3 HTML - RM - PDF41 pagesCom 225PDFNo ratings yetCom 2259 pagesWhat Is HTML?PDFNo ratings yetWhat Is HTML?55 pages1PDFNo ratings yet161 pagesHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextPDFNo ratings yetHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text80 pagesFull Stack 2024 MSCPDFNo ratings yetFull Stack 2024 MSC34 pagesAbout HTMLPDFNo ratings yetAbout HTML25 pagesHTML DocumentsPDFNo ratings yetHTML Documents14 pagesHTML 1PDFNo ratings yetHTML 15 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML4 pagesHTML Tutorial: Examples in Each ChapterPDF100% (1)HTML Tutorial: Examples in Each Chapter22 pagesW3school (HTML Notes)PDF0% (1)W3school (HTML Notes)13 pagesEasy html and cssFrom EverandEasy html and cssS VASISTNo ratings yetWeb Development Step by Step - HTMLFrom EverandWeb Development Step by Step - HTMLEnrique VicenteNo ratings yetLesson 2 CSS Selectors Div Span and LinkPDFNo ratings yetLesson 2 CSS Selectors Div Span and Link29 pagesMathML With HTML5PDF0% (1)MathML With HTML510 pages3.1 Audio, Video, Speech Synthesis and RecognitionPDFNo ratings yet3.1 Audio, Video, Speech Synthesis and Recognition63 pagesDNGPDFNo ratings yetDNG2 pagesDamla KutukalanPDFNo ratings yetDamla Kutukalan116 pagesTop 50 XML Interview Questions & Answers: 1. What Is A Markup Language?PDFNo ratings yetTop 50 XML Interview Questions & Answers: 1. What Is A Markup Language?9 pagesHTML TutPDFNo ratings yetHTML Tut82 pagesClass 9 Computer GraphicsPDFNo ratings yetClass 9 Computer Graphics4 pagesInfile StatementPDFNo ratings yetInfile Statement20 pagesLearn C in One Day and Learn It Well C FPDFNo ratings yetLearn C in One Day and Learn It Well C F7 pagesDX LogPDFNo ratings yetDX Log26 pagesMyspace PHPPDFNo ratings yetMyspace PHP26 pagesMake Up MidtermPDFNo ratings yetMake Up Midterm6 pagesGlobal TablePDFNo ratings yetGlobal Table7 pagesYuugiri XDCCPDFNo ratings yetYuugiri XDCC8 pagesBulk Loading WTDocuments Into WindchillPDF100% (1)Bulk Loading WTDocuments Into Windchill8 pagesDoctor Strange 2016 1080p Remux AVC DTS-HD MA 7.1-UB40.Mkv - MediainfoPDFNo ratings yetDoctor Strange 2016 1080p Remux AVC DTS-HD MA 7.1-UB40.Mkv - Mediainfo3 pagesHTML Questions and AnswersPDFNo ratings yetHTML Questions and Answers5 pagesEncontre o Seu PorquePDFNo ratings yetEncontre o Seu Porque227 pagesAl Falah Development Saif Bin Darwish Search Export To Excel Project: Al Falah DevelopmentPDFNo ratings yetAl Falah Development Saif Bin Darwish Search Export To Excel Project: Al Falah Development6 pagesToaz - Info Mandarin As A Foreign Language Workbook PRPDFNo ratings yetToaz - Info Mandarin As A Foreign Language Workbook PR55 pagesXML Document ExamplePDFNo ratings yetXML Document Example3 pagesTracksPDFNo ratings yetTracks4 pagesWelcome To Webville: Getting To Know html5PDFNo ratings yetWelcome To Webville: Getting To Know html510 pagesGMAT OG Verbal Review 2nd EditionPDFNo ratings yetGMAT OG Verbal Review 2nd Edition332 pagesHTML (BScCsit 5th Semester)PDFNo ratings yetHTML (BScCsit 5th Semester)59 pagesKLCP Codec LogPDFNo ratings yetKLCP Codec Log4 pagesWhat Is XMLPDFNo ratings yetWhat Is XML13 pagesDocumentsComputersInternet & Web
for paragraphs, for links, for images, and for unordered and ordered lists, and for buttons. Attributes provide additional information about elements, such as the href attribute specifying the link address for tags and the src attribute specifying the image source for tags."> Address: [go: up one dir, main page] Include Form Remove Scripts Session Cookies Open navigation menuClose suggestionsSearchSearchenChange LanguageUploadSign inSign inDownload free for days0 ratings0% found this document useful (0 votes)72 views52 pagesWhat Is HTML?: HTML Is The Standard Markup Language For Creating Web PagesHTML is the standard markup language used to create web pages. It uses tags to define the structure of a web page and elements like headings, paragraphs, links, images, lists, and buttons. Common HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists, and <button> for buttons. Attributes provide additional information about elements, such as the href attribute specifying the link address for <a> tags and the src attribute specifying the image source for <img> tags.Uploaded byvincent bacusAI-enhanced title and descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PPTX, PDF, TXT or read online on ScribdDownloadSaveSave What is HTML Vincent For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReport0 ratings0% found this document useful (0 votes)72 views52 pagesWhat Is HTML?: HTML Is The Standard Markup Language For Creating Web PagesHTML is the standard markup language used to create web pages. It uses tags to define the structure of a web page and elements like headings, paragraphs, links, images, lists, and buttons. Common HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists, and <button> for buttons. Attributes provide additional information about elements, such as the href attribute specifying the link address for <a> tags and the src attribute specifying the image source for <img> tags.Uploaded byvincent bacusAI-enhanced title and descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PPTX, PDF, TXT or read online on ScribdCarousel PreviousCarousel NextDownloadSaveSave What is HTML Vincent For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReportDownload nowDownloadYou are on page 1/ 52SearchFullscreenWhat is HTML?HTML is the standard markup language for creating Web pages.•HTML stands for Hyper Text Markup Language•HTML describes the structure of Web pages using markup•HTML elements are the building blocks of HTML pages•HTML elements are represented by tags•HTML tags label pieces of content such as "heading","paragraph", "table", and so on•Browsers do not display the HTML tags, but use them to renderthe content of the page You can create your own website HTML Document<!DOCTYPE html> • The <!DOCTYPE html> declaration<html> defines this document to be HTML5<head> • The <html> element is the root<title>Page Title</title> element of an HTML page</head> • The <head> element contains meta<body> information about the document • The <title> element specifies a title<h1>My First Heading</h1> for the document<p>My first paragraph.</p> • The <body> element contains the visible page content</body> • The <h1> element defines a large heading</html> • The <p> element defines a paragraph HTML TagsHTML tags are element names surrounded by angle brackets: <tagname>content goes here...</tagname>• HTML tags normally come in pairs like <p> and </p>• The first tag in a pair is the start tag, the second tag is the end tag• The end tag is written like the start tag, but with a forward slash inserted before the tag nameTip: The start tag is also called the opening tag, and the end tagthe closing tag. Web BrowsersThe purpose of a webbrowser (Chrome, IE,Firefox, Safari) is to readHTML documents anddisplay them.The browser does notdisplay the HTML tags, butuses them to determinehow to display thedocument: HTML Page Structure<html> <head> <title>Page title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body></html>Note: Only the content inside the <body> section (the red text above) isdisplayed in a browser. The <!DOCTYPE> DeclarationThe <!DOCTYPE> declaration represents the document type, andhelps browsers to display web pages correctly.It must only appear once, at the top of the page (before any HTMLtags).The <!DOCTYPE> declaration is not case sensitive.The <!DOCTYPE> declaration for HTML5 is:<!DOCTYPE html> HTML VersionsVersion YearHTML 1991HTML 2.0 1995HTML 3.2 1997HTML 4.01 1999XHTML 2000HTML5 2014 How to write HTML?Write HTML Using Notepad or TextEditWeb pages can be created and modified by using professional HTMLeditors.However, for learning HTML we recommend a simple text editor likeNotepad (PC) or TextEdit (Mac).We believe using a simple text editor is a good way to learn HTML.Follow the four steps below to create your first web page withNotepad or TextEdit. Step 1: Open Notepad (PC)• Windows 8 or later:• Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.• Windows 7 or earlier:• Open Start > Programs > Accessories > Notepad Step 2: Write Some HTML• <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Step 3: Save theHTML PageSave the file on yourcomputer. Select File >Save as in the Notepadmenu.Name thefile "index.htm" andset the encodingto UTF-8 (which is thepreferred encoding forHTML files). You can use either .htm or .html as file extension. There is no difference, it is up to you. Step 4: View theHTML Page in YourBrowserOpen the savedHTML file in yourfavorite browser(double click onthe file, or right-click - and choose"Open with"). HTML Basic ExamplesHTML Documents• All HTML documents must start with a document type declaration: <!DOCTYPE html>.• The HTML document itself begins with <html> and ends with </html>.• The visible part of the HTML document is between <body> and </body>. Example<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first 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: Sample<h1>This is heading 1</h1> This is heading 1<h2>This is heading 2</h2> This is heading 2<h3>This is heading 3</h3> This is heading 3 HTML ParagraphsHTML paragraphs are defined with the <p> tag:Example<p>This is a paragraph.</p><p>This is another paragraph.</p>This is a paragraph.This is another paragraph. HTML LinksHTML links are defined with the <a> tag:Example<a href="https://www.w3schools.com">Thisis a link</a>HTML LinksHTML links are defined with the a tag:This is a linkThe link's destination is specified in the href attribute.Attributes are used to provide additional information about HTML elements. HTML ImagesHTML images are defined with the <img> tag.The source file (src), alternative text (alt), width,and height are provided as attributes:Example<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> How to insert image using HTML CodeCode Result<!DOCTYPE html> HTML Images<html><body> HTML images are defined with the img tag:<h2>HTML Images</h2><p>HTML images are defined with theimg tag:</p><img src="w3schools.jpg"alt="W3Schools.com" width="104"height="142"></body></html> HTML ButtonsHTML buttons are defined with the <button> tag:Example<button>Click me</button> ExampleHTML Code Result• <!DOCTYPE html> HTML Buttons• <html>• <body> HTML buttons are defined with the button tag:• <h2>HTML Buttons</h2> Click me• <p>HTML buttons are defined with the button tag:</p>• <button>Click me</button>• </body>• </html> HTML Lists HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):• Example• <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Sample Code<!DOCTYPE html> An Unordered HTML List<html><body> • Coffee<h2>An Unordered HTML List</h2> • Tea • Milk <ul> <li>Coffee</li> An Ordered HTML List <li>Tea</li> 1. Coffee <li>Milk</li></ul> 2. Tea 3. Milk<h2>An Ordered HTML List</h2><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol></body></html> HTML Elements• An HTML element usually consists of a start tag and end tag, with the content inserted in between:• <tagname>Content goes here...</tagname>• The HTML element is everything from the start tag to the end tag:• <p>My first paragraph.</p> Start tag Element content End tag<h1> My First Heading </h1><p> My first paragraph. </p><br> • The <html> element defines the whole document.• It has a start tag <html> and an end tag </html>.• The element content is another HTML element (the <body> element).<html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> • The <body> element defines the document body.• It has a start tag <body> and an end tag </body>.• The element content is two other HTML elements (<h1> and <p>).• <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> • The <h1> element defines a heading.• It has a start tag <h1> and an end tag </h1>.• The element content is: My First Heading.• <h1>My First Heading</h1> • The <p> element defines a paragraph.• It has a start tag <p> and an end tag </p>.• The element content is: My first paragraph.• <p>My first paragraph.</p> Empty HTML Elements• HTML elements with no content are called empty elements.• <br> is an empty element without a closing tag (the <br> tag defines a line break).• Empty elements can be "closed" in the opening tag like this: <br />. HTML AttributesAttributes provide additional information about HTMLelements.HTML Attributes• All HTML elements can have attributes• Attributes provide additional information about an element• Attributes are always specified in the start tag• Attributes usually come in name/value pairs like: name="value" The href Attribute• HTML links are defined with the <a> tag. The link address is specified in the href attribute:Example<a href="https://www.w3schools.com">This is a link</a> <!DOCTYPE html> The href Attribute<html><body> HTML links are defined with the a tag. The link <h2>The href Attribute</h2> address is specified in the <p>HTML links are defined with the href attribute:a tag. The link address is specified inthe href attribute:</p> This is a link<ahref="https://www.w3schools.com">This is a link</a></body></html> The src Attribute• HTML images are defined with the <img> tag.• The filename of the image source is specified in the src attribute:Example<img src="img_girl.jpg"> <!DOCTYPE html> The src Attribute<html> HTML images are defined with<body> the img tag, and the filename of the image source is specified in<h2>The src Attribute</h2> the src attribute:<p>HTML images are definedwith the img tag, and thefilename of the image source isspecified in the src attribute:</p><img src="img_girl.jpg"width="500" height="600"></body></html> The width and height Attributes• Images in HTML have a set of size attributes, which specifies the width and height of the image:Example<img src="img_girl.jpg" width="500" height="600"> Size Attributes<!DOCTYPE html> Images in HTML have a set of<html> size attributes, which specifies the<body> width and height of the image:<h2>Size Attributes</h2><p>Images in HTML have a set ofsize attributes, which specifiesthe width and height of theimage:</p><img src="img_girl.jpg"width="500" height="600"></body></html> The alt Attribute• The alt attribute specifies an alternative text to be used, when an image cannot be displayed.• The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.Example<img src="img_girl.jpg" alt="Girl witha jacket"> <!DOCTYPE html> The alt Attribute<html> The alt attribute should reflect the image content, so users who cannot<body> see the image gets an understanding of what the image contains:<h2>The alt Attribute</h2><p>The alt attribute should reflectthe image content, so users whocannot see the image gets anunderstanding of what the imagecontains:</p><img src="img_girl.jpg" alt="Girl witha jacket" width="500" height="600"></body></html> The style Attribute• The style attribute is used to specify the styling of an element, like color, font, size etc.Example<p style="color:red">I am aparagraph</p> <!DOCTYPE html> The style Attribute<html> The style attribute is used to<body> specify the styling of an element, like color:<h2>The style Attribute</h2> I am a paragraph.<p>The style attribute is usedto specify the styling of anelement, like color:</p><p style="color:red">I am aparagraph.</p></body></html> HTML Headings• Headings are defined with the <h1> to <h6> tags.• <h1> defines the most important heading. <h6> defines the least important heading.Example <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> How to adjust headingsBigger Headings• Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:Example• <h1 style="font- size:60px;">Heading 1</h1> <!DOCTYPE html><html> Heading 1<body> You can change the size of a heading with the style attribute, using the font-size property.<h1 style="font-size:60px;">Heading 1</h1><p>You can change the size ofa heading with the styleattribute, using the font-sizeproperty.</p></body></html> HTML ParagraphsThe HTML <p> element definesa paragraph:Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> <!DOCTYPE html> This is a paragraph.<html> This is a paragraph.<body> This is a paragraph.<p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p></body></html> Don't Forget the End Tag• Most browsers will display HTML correctly even if you forget the end tag:Example<p>This is a paragraph.<p>This is another paragraph. 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:Example<p>This is<br>a paragraph<br>withline breaks.</p> <!DOCTYPE html> This is<html> a paragraph<body> with line breaks<p>This is<br>aparagraph<br>with linebreaks</p></body></html> Sample HTML<!doctype html> The Fish Web Site<html> Welcome to the fish web site.<head> Everything you want to know<title> My Web Page </title> about fish is in this site.</head> This is a Section on Bass Fish<body><h1> The Fish Web Site </h1> Bass Fish live in lakes.<p> Welcome to the fish web site.Everything you want to know aboutfish is in this site. </p><h2> This is a Section on Bass Fish</h2><p> Bass Fish live in lakes. </p></body></html>You might also likeRespiratia Holotropica Terapie Si Explorare Interioara Romanian EditionPDF0% (1)Respiratia Holotropica Terapie Si Explorare Interioara Romanian Edition2 pagesThe Physiology of Money Marathi - Sunil Wani PDFNo ratings yetThe Physiology of Money Marathi - Sunil Wani 175 pagesUltra HTML ReferenceFrom EverandUltra HTML ReferenceMike Abelar2/5 (1)HTML NotesPDFNo ratings yetHTML Notes23 pagesCPC06 Advance Web Development2PDFNo ratings yetCPC06 Advance Web Development236 pagesWhat Is HTML?: Example ResultPDFNo ratings yetWhat Is HTML?: Example Result19 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML32 pagesHypertext Markup LangaugePDFNo ratings yetHypertext Markup Langauge9 pagesHTMLPDFNo ratings yetHTML100 pagesHTMLPDFNo ratings yetHTML61 pagesEditors: Write HTML Using Notepad or TexteditPDFNo ratings yetEditors: Write HTML Using Notepad or Textedit53 pagesHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLPDFNo ratings yetHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML10 pagesHTML Css JsPDFNo ratings yetHTML Css Js491 pagesHTMLPDF100% (4)HTML108 pagesHTML TutorialPDFNo ratings yetHTML Tutorial22 pagesHyperText Markup Language New LessonPDFNo ratings yetHyperText Markup Language New Lesson169 pagesHTML w3 SchoolsPDFNo ratings yetHTML w3 Schools30 pagesHTML NotePDFNo ratings yetHTML Note39 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML63 pagesHTML Is The Standard Markup Language For Creating Web PagesPDFNo ratings yetHTML Is The Standard Markup Language For Creating Web Pages28 pages01 HTMLPDFNo ratings yet01 HTML96 pagesWDP Material OnePDFNo ratings yetWDP Material One97 pagesHTMLPDFNo ratings yetHTML84 pagesHTMLPDFNo ratings yetHTML14 pagesHTML&CSS BellsPDFNo ratings yetHTML&CSS Bells230 pagesLecture 02 - HTML Basics1PDFNo ratings yetLecture 02 - HTML Basics174 pagesWeb DevelopmentPDFNo ratings yetWeb Development32 pagesHTML 1PDFNo ratings yetHTML 133 pages!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLPDFNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML11 pages03 HTMLPDFNo ratings yet03 HTML113 pagesHTML Notes PDFNo ratings yetHTML Notes 30 pagesMy HTML NotesPDF100% (1)My HTML Notes43 pagesHTML Lesson 1PDFNo ratings yetHTML Lesson 15 pagesHTML TutorialPDFNo ratings yetHTML Tutorial200 pagesHTML5 TutorialPDFNo ratings yetHTML5 Tutorial32 pagesHTML IntroductionPDFNo ratings yetHTML Introduction26 pagesHTML TutorialPDFNo ratings yetHTML Tutorial63 pagesHTML-Chapter 1 - 4PDF100% (1)HTML-Chapter 1 - 4126 pagesLecture1 HTMLPDFNo ratings yetLecture1 HTML70 pagesHướng dẫn lập trình web - HTMLPDFNo ratings yetHướng dẫn lập trình web - HTML296 pagesHTML Documents: ExamplePDFNo ratings yetHTML Documents: Example3 pagesBcac501 - It - Part-1-HtmlPDFNo ratings yetBcac501 - It - Part-1-Html117 pagesHTML BasicPDFNo ratings yetHTML Basic92 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML99 pagesHTML IntroPDFNo ratings yetHTML Intro137 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML66 pagesWrite HTML Using Notepad or Textedit: ExamplePDFNo ratings yetWrite HTML Using Notepad or Textedit: Example23 pagesHTML NotesPDFNo ratings yetHTML Notes21 pagesUnit 3 HTML - RM - PDFPDFNo ratings yetUnit 3 HTML - RM - PDF41 pagesCom 225PDFNo ratings yetCom 2259 pagesWhat Is HTML?PDFNo ratings yetWhat Is HTML?55 pages1PDFNo ratings yet161 pagesHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextPDFNo ratings yetHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text80 pagesFull Stack 2024 MSCPDFNo ratings yetFull Stack 2024 MSC34 pagesAbout HTMLPDFNo ratings yetAbout HTML25 pagesHTML DocumentsPDFNo ratings yetHTML Documents14 pagesHTML 1PDFNo ratings yetHTML 15 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML4 pagesHTML Tutorial: Examples in Each ChapterPDF100% (1)HTML Tutorial: Examples in Each Chapter22 pagesW3school (HTML Notes)PDF0% (1)W3school (HTML Notes)13 pagesEasy html and cssFrom EverandEasy html and cssS VASISTNo ratings yetWeb Development Step by Step - HTMLFrom EverandWeb Development Step by Step - HTMLEnrique VicenteNo ratings yetLesson 2 CSS Selectors Div Span and LinkPDFNo ratings yetLesson 2 CSS Selectors Div Span and Link29 pagesMathML With HTML5PDF0% (1)MathML With HTML510 pages3.1 Audio, Video, Speech Synthesis and RecognitionPDFNo ratings yet3.1 Audio, Video, Speech Synthesis and Recognition63 pagesDNGPDFNo ratings yetDNG2 pagesDamla KutukalanPDFNo ratings yetDamla Kutukalan116 pagesTop 50 XML Interview Questions & Answers: 1. What Is A Markup Language?PDFNo ratings yetTop 50 XML Interview Questions & Answers: 1. What Is A Markup Language?9 pagesHTML TutPDFNo ratings yetHTML Tut82 pagesClass 9 Computer GraphicsPDFNo ratings yetClass 9 Computer Graphics4 pagesInfile StatementPDFNo ratings yetInfile Statement20 pagesLearn C in One Day and Learn It Well C FPDFNo ratings yetLearn C in One Day and Learn It Well C F7 pagesDX LogPDFNo ratings yetDX Log26 pagesMyspace PHPPDFNo ratings yetMyspace PHP26 pagesMake Up MidtermPDFNo ratings yetMake Up Midterm6 pagesGlobal TablePDFNo ratings yetGlobal Table7 pagesYuugiri XDCCPDFNo ratings yetYuugiri XDCC8 pagesBulk Loading WTDocuments Into WindchillPDF100% (1)Bulk Loading WTDocuments Into Windchill8 pagesDoctor Strange 2016 1080p Remux AVC DTS-HD MA 7.1-UB40.Mkv - MediainfoPDFNo ratings yetDoctor Strange 2016 1080p Remux AVC DTS-HD MA 7.1-UB40.Mkv - Mediainfo3 pagesHTML Questions and AnswersPDFNo ratings yetHTML Questions and Answers5 pagesEncontre o Seu PorquePDFNo ratings yetEncontre o Seu Porque227 pagesAl Falah Development Saif Bin Darwish Search Export To Excel Project: Al Falah DevelopmentPDFNo ratings yetAl Falah Development Saif Bin Darwish Search Export To Excel Project: Al Falah Development6 pagesToaz - Info Mandarin As A Foreign Language Workbook PRPDFNo ratings yetToaz - Info Mandarin As A Foreign Language Workbook PR55 pagesXML Document ExamplePDFNo ratings yetXML Document Example3 pagesTracksPDFNo ratings yetTracks4 pagesWelcome To Webville: Getting To Know html5PDFNo ratings yetWelcome To Webville: Getting To Know html510 pagesGMAT OG Verbal Review 2nd EditionPDFNo ratings yetGMAT OG Verbal Review 2nd Edition332 pagesHTML (BScCsit 5th Semester)PDFNo ratings yetHTML (BScCsit 5th Semester)59 pagesKLCP Codec LogPDFNo ratings yetKLCP Codec Log4 pagesWhat Is XMLPDFNo ratings yetWhat Is XML13 pagesDocumentsComputersInternet & Web
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
AI-enhanced title and description
Tip: The start tag is also called the opening tag, and the end tagthe closing tag. Web BrowsersThe purpose of a webbrowser (Chrome, IE,Firefox, Safari) is to readHTML documents anddisplay them.
Note: Only the content inside the <body> section (the red text above) isdisplayed in a browser. The <!DOCTYPE> Declaration
It must only appear once, at the top of the page (before any HTMLtags).
<!DOCTYPE html> HTML Versions
Version YearHTML 1991HTML 2.0 1995HTML 3.2 1997HTML 4.01 1999XHTML 2000HTML5 2014 How to write HTML?Write HTML Using Notepad or TextEdit
Follow the four steps below to create your first web page withNotepad or TextEdit. Step 1: Open Notepad (PC)• Windows 8 or later:• Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.• Windows 7 or earlier:• Open Start > Programs > Accessories > Notepad Step 2: Write Some HTML• <!DOCTYPE html> <html> <body>
</body> </html> Step 3: Save theHTML Page
Name thefile "index.htm" andset the encodingto UTF-8 (which is thepreferred encoding forHTML files).
You can use either .htm or .html as file extension. There is no difference, it is up to you. Step 4: View theHTML Page in YourBrowserOpen the savedHTML file in yourfavorite browser(double click onthe file, or right-click - and choose"Open with"). HTML Basic Examples
HTML Documents• All HTML documents must start with a document type declaration: <!DOCTYPE html>.• The HTML document itself begins with <html> and ends with </html>.• The visible part of the HTML document is between <body> and </body>. Example<!DOCTYPE html><html><body>
</body></html> HTML Headings HTML headings are defined with the <h1> to <h6> tags.
Example<p>This is a paragraph.</p><p>This is another paragraph.</p>
This is a paragraph.This is another paragraph. HTML LinksHTML links are defined with the <a> tag:
Example<a href="https://www.w3schools.com">Thisis a link</a>
HTML LinksHTML links are defined with the a tag:This is a link
Code Result<!DOCTYPE html> HTML Images<html><body> HTML images are defined with the img tag:<h2>HTML Images</h2><p>HTML images are defined with theimg tag:</p>
<img src="w3schools.jpg"alt="W3Schools.com" width="104"height="142">
</body></html> HTML ButtonsHTML buttons are defined with the <button> tag:
Example<button>Click me</button> ExampleHTML Code Result• <!DOCTYPE html> HTML Buttons• <html>• <body> HTML buttons are defined with the button tag:• <h2>HTML Buttons</h2> Click me• <p>HTML buttons are defined with the button tag:</p>
• <button>Click me</button>
• </body>• </html> HTML Lists
• Example• <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Sample Code<!DOCTYPE html> An Unordered HTML List<html><body> • Coffee<h2>An Unordered HTML List</h2> • Tea • Milk <ul> <li>Coffee</li> An Ordered HTML List <li>Tea</li> 1. Coffee <li>Milk</li></ul> 2. Tea 3. Milk<h2>An Ordered HTML List</h2>
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
</body></html> HTML Elements
<br> • The <html> element defines the whole document.• It has a start tag <html> and an end tag </html>.• The element content is another HTML element (the <body> element).
<html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> • The <body> element defines the document body.• It has a start tag <body> and an end tag </body>.• The element content is two other HTML elements (<h1> and <p>).• <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> • The <h1> element defines a heading.• It has a start tag <h1> and an end tag </h1>.• The element content is: My First Heading.• <h1>My First Heading</h1> • The <p> element defines a paragraph.• It has a start tag <p> and an end tag </p>.• The element content is: My first paragraph.• <p>My first paragraph.</p> Empty HTML Elements• HTML elements with no content are called empty elements.• <br> is an empty element without a closing tag (the <br> tag defines a line break).• Empty elements can be "closed" in the opening tag like this: <br />. HTML AttributesAttributes provide additional information about HTMLelements.
HTML Attributes• All HTML elements can have attributes• Attributes provide additional information about an element• Attributes are always specified in the start tag• Attributes usually come in name/value pairs like: name="value" The href Attribute• HTML links are defined with the <a> tag. The link address is specified in the href attribute:Example<a href="https://www.w3schools.com">This is a link</a> <!DOCTYPE html> The href Attribute<html><body> HTML links are defined with the a tag. The link <h2>The href Attribute</h2> address is specified in the <p>HTML links are defined with the href attribute:a tag. The link address is specified inthe href attribute:</p> This is a link
<ahref="https://www.w3schools.com">This is a link</a>
</body></html> The src Attribute• HTML images are defined with the <img> tag.• The filename of the image source is specified in the src attribute:Example<img src="img_girl.jpg"> <!DOCTYPE html> The src Attribute<html> HTML images are defined with<body> the img tag, and the filename of the image source is specified in<h2>The src Attribute</h2> the src attribute:<p>HTML images are definedwith the img tag, and thefilename of the image source isspecified in the src attribute:</p>
<img src="img_girl.jpg"width="500" height="600">
</body></html> The width and height Attributes• Images in HTML have a set of size attributes, which specifies the width and height of the image:Example<img src="img_girl.jpg" width="500" height="600"> Size Attributes<!DOCTYPE html> Images in HTML have a set of<html> size attributes, which specifies the<body> width and height of the image:
<h2>Size Attributes</h2><p>Images in HTML have a set ofsize attributes, which specifiesthe width and height of theimage:</p>
</body></html> The alt Attribute• The alt attribute specifies an alternative text to be used, when an image cannot be displayed.• The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.
Example<img src="img_girl.jpg" alt="Girl witha jacket"> <!DOCTYPE html> The alt Attribute<html> The alt attribute should reflect the image content, so users who cannot<body> see the image gets an understanding of what the image contains:<h2>The alt Attribute</h2><p>The alt attribute should reflectthe image content, so users whocannot see the image gets anunderstanding of what the imagecontains:</p>
</body></html> The style Attribute• The style attribute is used to specify the styling of an element, like color, font, size etc.
Example<p style="color:red">I am aparagraph</p> <!DOCTYPE html> The style Attribute<html> The style attribute is used to<body> specify the styling of an element, like color:<h2>The style Attribute</h2> I am a paragraph.<p>The style attribute is usedto specify the styling of anelement, like color:</p>
<p style="color:red">I am aparagraph.</p>
</body></html> HTML Headings
Example <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> How to adjust headingsBigger Headings• Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:Example• <h1 style="font- size:60px;">Heading 1</h1> <!DOCTYPE html><html> Heading 1<body> You can change the size of a heading with the style attribute, using the font-size property.<h1 style="font-size:60px;">Heading 1</h1>
</body></html> HTML Paragraphs
Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> <!DOCTYPE html> This is a paragraph.<html> This is a paragraph.<body> This is a paragraph.
<p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p>
</body></html> Don't Forget the End Tag• Most browsers will display HTML correctly even if you forget the end tag:Example<p>This is a paragraph.<p>This is another paragraph. 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:Example<p>This is<br>a paragraph<br>withline breaks.</p> <!DOCTYPE html> This is<html> a paragraph<body> with line breaks
<p>This is<br>aparagraph<br>with linebreaks</p>
</body></html> Sample HTML<!doctype html> The Fish Web Site<html> Welcome to the fish web site.<head> Everything you want to know<title> My Web Page </title> about fish is in this site.</head> This is a Section on Bass Fish<body><h1> The Fish Web Site </h1> Bass Fish live in lakes.<p> Welcome to the fish web site.Everything you want to know aboutfish is in this site. </p><h2> This is a Section on Bass Fish</h2><p> Bass Fish live in lakes. </p></body></html>