,
, , , and that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.">, , , , , , , , and that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.">Open navigation menuClose suggestionsSearchSearchenChange LanguageUploadSign inSign inDownload free for days0 ratings0% found this document useful (0 votes)16 views45 pagesHTMLThe document provides an introduction to HTML (Hypertext Markup Language), which is the standard markup language used to create web pages. It describes some key HTML elements and tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, <img>, and <form> that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.Uploaded byhamA lolAI-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 1. HTML For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReport0 ratings0% found this document useful (0 votes)16 views45 pagesHTMLThe document provides an introduction to HTML (Hypertext Markup Language), which is the standard markup language used to create web pages. It describes some key HTML elements and tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, <img>, and <form> that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.Uploaded byhamA lolAI-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 1. HTML For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReportDownload nowDownloadYou are on page 1/ 45SearchFullscreenINTRODUCTION TO WEB PROGRAMMING0731213LECTURE 1 WHAT IS HTML?WHAT 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 render the content of the pageA 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 this document to be HTML5• The <html> element is the root element of an HTML page• The <head> element contains meta information about the document• The <title> element specifies a title for the document• The <body> element contains the visible page content• The <h1> element defines a large heading• The <p> element defines a paragraphHTML TAGS• HTML 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 name• Tip: The start tag is also called the opening tag, and the end tag the closing tag.WEB BROWSERS• The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.• The browser does not display the HTML tags, but uses them to determine how to display the document:HTML PAGE STRUCTURE Only the content inside the <body> section (the white area above) is displayed in a browser.STEPS TO CREATE A WEB PAGEFollow the four steps below to create your first web page with Notepad/Notepad++ orTextEdit.• Step 1: Open Notepad/Notepad++ or TextEdit• Step 2: Write Some HTML into Notepad/Notepad++ or TextEditSTEPS TO CREATE A WEB PAGEFollow the four steps below to create your first web page with Notepad/Notepad++ orTextEdit.• Step 3: Save the HTML PageSTEPS TO CREATE A WEB PAGEFollow the four steps below to create your first web page with Notepad or TextEdit.• Step 4: View the HTML Page in Your BrowserLECTURE 2 HTML TAGS (1)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>. <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>HTML BASIC TAGSHTML 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> <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 BASIC TAGSHTML Paragraphs• HTML paragraphs are defined with the <p> tag. <p>This is a paragraph.</p> <p>This is another paragraph.</p>HTML BASIC TAGSHTML Line Break• HTML Line Break is defined with the <br/> tag• HTML elements with no content are called empty elements. Empty elements do not have an end tag such as the Line Break element <br/>HTML Links• HTML links are defined with the <a> tag• The link's destination is specified in the href attribute.• Attributes are used to provide additional information about HTML elements. <a href="https://www.google.com">This is a link</a> <a href="page1.html">This is a link</a> <a href="pages/page1.html">This is a link</a>HTML BASIC TAGSHTML Images• HTML images are defined with the <img> tag.• The source file (src), alternative text (alt), width, and height are provided as attributes.• The alt attribute specifies an alternative text to be used, when an image cannot be displayed. <img src="image.jpg" alt="This is an image" width="104" height="142"> <img src="images/image.jpg" alt="This is an image" width="104" height="142">HTML BASIC TAGSHTML button• HTML button defines a clickable button. <button type="button">Click Me!</button>• Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.• Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.HTML BASIC TAGSHTML div• HTML div defines a division or a section in an HTML document.• The <div> tag is used to group block-elements to format them with CSS. <div id="myId"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>Tip: The <div> element is very often used together with CSS, to layout a web page.Note: By default, browsers always place a line break before and after the <div>element. However, this can be changed with CSS.HTML BASIC TAGSHTML span• HTML span is used to group inline-elements in a document.• The <span> tag provides no visual change by itself.• The <span> tag provides a way to add a hook to a part of a text or a part of a document. <p>My mother has <span style="color:blue">blue</span> eyes.</p>Tip: When a text is hooked in a <span> element, you can style it with CSS, ormanipulate it with JavaScript.LECTURE 3 HTML TAGS (2)NESTED HTML ELEMENTS• HTML elements can be nested (elements can contain elements).• All HTML documents consist of nested HTML elements. <a href="https://www.google.com"> <img src="image.jpg" alt="google.com" width="104" height="142"> </a>HTML ELEMENTSSingle or Double Quotes?• Double quotes around attribute values are the most common in HTML, but single quotes can also be used.• In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes: <a href="page1.html">This is a link</a> <a href='page1.html'>This is a link</a>THE HTML <HEAD> ELEMENT• The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.• The <head> element is placed between the <html> tag and the <body> tag• Metadata typically define the document title, character set, styles, links, scripts, and other meta information.• The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. <meta> tags always go inside the <head> element<!DOCTYPE html><html> <head> <title>My First HTML</title> <meta charset="UTF-8" /> </head> <body> . . .HTML COMMENT TAGS• You can add comments to your HTML source by using the following syntax <!-- Write your comments here -->• Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.• Comments are not displayed by 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 --> <!--This is a comment. Comments are not displayed in the browser-->LECTURE 4 HTML FORM (1)HTML FORM EXAMPLE<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></form>THE <FORM> ELEMENT• The HTML <form> element defines a form that is used to collect user input• An HTML form contains form elements.• Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. <form> . form elements . </form>THE <INPUT> ELEMENT• The <input> element is the most important form element.• The <input> element can be displayed in several ways, depending on the type attribute. Type Description >"input type="text< Defines a one-line text input field >"input type="radio< Defines a radio button (for selecting one of many choices) >"input type="submit< Defines a submit button (for submitting the form)TEXT INPUT<input type="text"> defines a one-line input field for text input <form> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"> </form>Note: The form itself is not visible. Also note that the default width of a text field is 20characters.PASSWORD INPUT<input type="password"> defines a password fieldThe characters in a password field are masked (shown as asterisks or circles). <form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form>RADIO BUTTON INPUT<input type="radio"> defines a radio button. <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form>Note: The form itself is not visible. Also note that the default width of a text field is 20characters.CHECKBOX INPUT<input type="checkbox"> defines a checkbox.Checkboxes let a user select ZERO or MORE options of a limited number of choices.<form> <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car</form>THE VALUE ATTRIBUTEThe value attribute specifies the initial value for an input field <form action=""> First name:<br> <input type="text" name="firstname" value="John"> </form>THE SUBMIT BUTTON<input type="submit"> defines a button for submitting the form data to a form-handler.• The form-handler is typically a server page with a script for processing input data.• The form-handler is specified in the form's action attribute <form action="action_page.php"> First name:<br><input type="text" name="firstname" value="Mickey"><br> Last name:<br><input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form>THE <SELECT> ELEMENTThe <select> element defines a drop-down list: <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>• The <option> elements defines an option that can be selected.• By default, the first item in the drop-down list is selected.• To define a pre-selected option, add the selected attribute to the option: <option value="fiat" selected>Fiat</option>THE <TEXTAREA> ELEMENTThe <textarea> element defines a multi-line input field (a text area) <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>• The rows attribute specifies the visible number of lines in a text area.• The cols attribute specifies the visible width of a text area.• This is how the HTML code above will be displayed in a browserLECTURE 5 HTML FORM (2)THE ACTION ATTRIBUTE• The action attribute defines the action to be performed when the form is submitted.• Normally, the form data is sent to a web page on the server when the user clicks on the submit button.• In the example above, the form data is sent to a page on the server called "action_page.php". This page contains a server-side script that handles the form data• If the action attribute is omitted, the action is set to the current page. <form action="action_page.php">THE METHOD ATTRIBUTEThe method attribute specifies the HTTP method (GET or POST) to be used whensubmitting the form data<form action="action_page.php" method="get"><form action="action_page.php" method="post">GET VS. POSTWhen to Use GET?• The default method when submitting form data is GET. GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too• However, when GET is used, the submitted form data will be visible in the page address field action_page.php?firstname=Mickey&lastname=MouseWhen to Use POST?• Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.• POST has no size limitations, and can be used to send large amounts of data.THE NAME ATTRIBUTE• Each input field must have a name attribute to be submitted.• If the name attribute is omitted, the data of that input field will not be sent at all.• This example will only submit the "Last name" input field <form action="action_page.php"> First name:<br> <input type="text" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form>SELF STUDY• HTML Symbols (https://www.w3schools.com/html/html_symbols.asp)• HTML Charset (https://www.w3schools.com/html/html_charset.asp)• HTML Tables (https://www.w3schools.com/html/html_tables.asp)• HTML Lists (https://www.w3schools.com/html/html_lists.asp)• HTML5 New Elements (https://www.w3schools.com/html/html5_intro.asp)REFERENCES• https://www.w3schools.com/• Robin Nixon, Learning PHP, MySQL, JavaScript, and CSS, 2013• Mike McGrath, PHP & My SQL in easy steps, 2012.THE ENDYou might also likeBcac501 - It - Part-1-HtmlPDFNo ratings yetBcac501 - It - Part-1-Html117 pagesHTMLPDF100% (1)HTML74 pagesHTML NotesPDFNo ratings yetHTML Notes22 pagesBCA - (WEB PROGRAMMING) (Total 5 Units PDFPDF100% (2)BCA - (WEB PROGRAMMING) (Total 5 Units PDF153 pages(Lesson 1) HTML FundamentalsPDFNo ratings yet(Lesson 1) HTML Fundamentals43 pagesClass 8 Computer Worksheet of Introduction To HTMLPDFNo ratings yetClass 8 Computer Worksheet of Introduction To HTML8 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 /HTML113 pagesWeb Programming Unit - IPDF80% (10)Web Programming Unit - I45 pagesUnit 1 WebPDFNo ratings yetUnit 1 Web23 pagesHTML Chapter 1PDFNo ratings yetHTML Chapter 127 pagesWeb Fundamentals: Week 4PDFNo ratings yetWeb Fundamentals: Week 433 pagesAudio & Video HTMLPDFNo ratings yetAudio & Video HTML218 pagesLecture 02 - HTML Basics1PDFNo ratings yetLecture 02 - HTML Basics174 pagesWeb Designing and Development: Index - HTMLPDFNo ratings yetWeb Designing and Development: Index - HTML5 pagesHTMLPDFNo ratings yetHTML61 pagesFull Stack 2024 MSCPDFNo ratings yetFull Stack 2024 MSC34 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML99 pagesHTML Is The Standard Markup Language For Creating Web PagesPDFNo ratings yetHTML Is The Standard Markup Language For Creating Web Pages12 pagesWeb Programming Notes PDFPDFNo ratings yetWeb Programming Notes PDF82 pagesInfo2180 Lecture 2PDFNo ratings yetInfo2180 Lecture 258 pagesJava Programming Chapter-8 Servlet-1PDFNo ratings yetJava Programming Chapter-8 Servlet-154 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML7 pagesHTML SYlABUSPDFNo ratings yetHTML SYlABUS50 pagesWeb Programming NotesPDF100% (1)Web Programming Notes82 pagesAcid Control Bill 2025PDFNo ratings yetAcid Control Bill 202514 pagesAll You Should Know About HTML.PDFNo ratings yetAll You Should Know About HTML.169 pagesUnit 2PDFNo ratings yetUnit 226 pagesWT Notes PSPPDFNo ratings yetWT Notes PSP50 pagesModule 2. Introduction To HTMLPDFNo ratings yetModule 2. Introduction To HTML26 pagesHyperText Markup Language New LessonPDFNo ratings yetHyperText Markup Language New Lesson169 pagesLecture1 HTMLPDFNo ratings yetLecture1 HTML70 pagesZita - Lifelo 1587044694 APDFNo ratings yetZita - Lifelo 1587044694 A105 pagesGr7 HTML Notes 2022-23PDFNo ratings yetGr7 HTML Notes 2022-2348 pages2024 AMC Paper UpperPDF83% (6)2024 AMC Paper Upper10 pagesDos & HTML: Project ReportPDFNo ratings yetDos & HTML: Project Report17 pagesBachelore of Computer Applications ST - Xavier'S College - Krupa ShahPDFNo ratings yetBachelore of Computer Applications ST - Xavier'S College - Krupa Shah75 pagesHTML Reviewer PPDFNo ratings yetHTML Reviewer P8 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML33 pagesWebsite Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 0768572253PDFNo ratings yetWebsite Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 076857225356 pagesWeb Programming NotesPDFNo ratings yetWeb Programming Notes82 pagesHTML and CssPDFNo ratings yetHTML and Css27 pagesHTML IntroductionPDFNo ratings yetHTML Introduction36 pagesHTML5 TutorialPDFNo ratings yetHTML5 Tutorial32 pagesHTML 3PDFNo ratings yetHTML 325 pagesA Complete Reference of HTMLPDFNo ratings yetA Complete Reference of HTML160 pagesWhat Is HTML?PDFNo ratings yetWhat Is HTML?19 pagesHTML IntroductionPDFNo ratings yetHTML Introduction92 pagesHTML TutorialPDFNo ratings yetHTML Tutorial39 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML14 pagesWeb DesigningPDFNo ratings yetWeb Designing8 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML36 pagesPM CoveragePDFNo ratings yetPM Coverage9 pagesPascua, Nate Evan Sevdaz Bellus ICT Q1 W1PDFNo ratings yetPascua, Nate Evan Sevdaz Bellus ICT Q1 W116 pagesHTML TutorialsPDFNo ratings yetHTML Tutorials13 pagesBasic HTML: Created By-: Satish Chaudhary For SweetPDFNo ratings yetBasic HTML: Created By-: Satish Chaudhary For Sweet55 pagesGrade 10 HeredityPDFNo ratings yetGrade 10 Heredity7 pagesHTMLPDFNo ratings yetHTML14 pagesEffects of Soil and Water Conservation Techniques On Soil Productivity and Bean Grain Yield in Nyamasheke District, RwandaPDFNo ratings yetEffects of Soil and Water Conservation Techniques On Soil Productivity and Bean Grain Yield in Nyamasheke District, Rwanda91 pagesHTML Lesson 1PDFNo ratings yetHTML Lesson 15 pagesManual Plataforma Articulada 20 26MTS Diesel Haulotte Mod. Ha20px Ha26px - 042616PDF100% (2)Manual Plataforma Articulada 20 26MTS Diesel Haulotte Mod. Ha20px Ha26px - 04261670 pagesFDS1 Differential ManualPDFNo ratings yetFDS1 Differential Manual12 pagesThe Medieval English Landscape, 1000-1540PDF100% (2)The Medieval English Landscape, 1000-1540294 pagesTelephone EtiquettePDFNo ratings yetTelephone Etiquette46 pagesSoal BingPDFNo ratings yetSoal Bing29 pages5 6201599095119806830 PDFPDFNo ratings yet5 6201599095119806830 PDF224 pagesBus Bs Iii: Price List Effective 1St February' 2013PDFNo ratings yetBus Bs Iii: Price List Effective 1St February' 20138 pagesLec # 05 Plane Table SurveyPDFNo ratings yetLec # 05 Plane Table Survey32 pagesMCM Responders Training Activities - 2024PDFNo ratings yetMCM Responders Training Activities - 20245 pagesBootstrapping in Compiler DesignPDF90% (20)Bootstrapping in Compiler Design12 pagesRedemption Catalog FAPDFNo ratings yetRedemption Catalog FA16 pages STILL RX 70 Technical Data FREE PDF0% (1) STILL RX 70 Technical Data FREE 22 pages4.16 Font Styleverticalalign Inheritfont Styleverticalalign Inherittaxas de Cmbio e PreosfontfontPDFNo ratings yet4.16 Font Styleverticalalign Inheritfont Styleverticalalign Inherittaxas de Cmbio e Preosfontfont5 pagesSanta Sophia Bulletin 1 Jun 2014PDFNo ratings yetSanta Sophia Bulletin 1 Jun 20146 pagesHTML FilePDFNo ratings yetHTML File10 pagesThis A Heading This Is A Paragraph. This Is Another Paragraph.PDFNo ratings yetThis A Heading This Is A Paragraph. This Is Another Paragraph.4 pagesKSKSPDFNo ratings yetKSKS5 pagesArt 5 (Week 3)PDFNo ratings yetArt 5 (Week 3)3 pagesRefPDFNo ratings yetRef6 pagesUnit 10PDFNo ratings yetUnit 109 pagesIn Ultimate Credit Card TNCPDFNo ratings yetIn Ultimate Credit Card TNC10 pagesDaniel R. Forbes Law Enforcement/Security Professional: Mobile No: (512) 573-2746PDFNo ratings yetDaniel R. Forbes Law Enforcement/Security Professional: Mobile No: (512) 573-27463 pagesJurnal Paint 2 PDFPDFNo ratings yetJurnal Paint 2 PDF4 pagesSAFC Biosciences - Technical Bulletin - BIOEAZE Bags - Tubing and ConnectorsPDF100% (1)SAFC Biosciences - Technical Bulletin - BIOEAZE Bags - Tubing and Connectors2 pagesAbstract Vs Executive Summary-NHSPDFNo ratings yetAbstract Vs Executive Summary-NHS3 pagesMarketing Mix 4ps PNGPDF50% (2)Marketing Mix 4ps PNG2 pagesIs - 2026PDFNo ratings yetIs - 20267 pagesPharmaceutical Medical Sales Manager in Ashland KY Resume James DickisonPDFNo ratings yetPharmaceutical Medical Sales Manager in Ashland KY Resume James Dickison2 pagesUltra HTML ReferenceFrom EverandUltra HTML ReferenceMike Abelar2/5 (1)Web Development Step by StepFrom EverandWeb Development Step by StepEnrique VicenteNo ratings yetWeb Development Step by Step - HTMLFrom EverandWeb Development Step by Step - HTMLEnrique VicenteNo ratings yetDocumentsComputersInternet & Web
, , , and that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.">Open navigation menuClose suggestionsSearchSearchenChange LanguageUploadSign inSign inDownload free for days0 ratings0% found this document useful (0 votes)16 views45 pagesHTMLThe document provides an introduction to HTML (Hypertext Markup Language), which is the standard markup language used to create web pages. It describes some key HTML elements and tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, <img>, and <form> that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.Uploaded byhamA lolAI-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 1. HTML For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReport0 ratings0% found this document useful (0 votes)16 views45 pagesHTMLThe document provides an introduction to HTML (Hypertext Markup Language), which is the standard markup language used to create web pages. It describes some key HTML elements and tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, <img>, and <form> that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.Uploaded byhamA lolAI-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 1. HTML For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReportDownload nowDownloadYou are on page 1/ 45SearchFullscreenINTRODUCTION TO WEB PROGRAMMING0731213LECTURE 1 WHAT IS HTML?WHAT 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 render the content of the pageA 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 this document to be HTML5• The <html> element is the root element of an HTML page• The <head> element contains meta information about the document• The <title> element specifies a title for the document• The <body> element contains the visible page content• The <h1> element defines a large heading• The <p> element defines a paragraphHTML TAGS• HTML 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 name• Tip: The start tag is also called the opening tag, and the end tag the closing tag.WEB BROWSERS• The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.• The browser does not display the HTML tags, but uses them to determine how to display the document:HTML PAGE STRUCTURE Only the content inside the <body> section (the white area above) is displayed in a browser.STEPS TO CREATE A WEB PAGEFollow the four steps below to create your first web page with Notepad/Notepad++ orTextEdit.• Step 1: Open Notepad/Notepad++ or TextEdit• Step 2: Write Some HTML into Notepad/Notepad++ or TextEditSTEPS TO CREATE A WEB PAGEFollow the four steps below to create your first web page with Notepad/Notepad++ orTextEdit.• Step 3: Save the HTML PageSTEPS TO CREATE A WEB PAGEFollow the four steps below to create your first web page with Notepad or TextEdit.• Step 4: View the HTML Page in Your BrowserLECTURE 2 HTML TAGS (1)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>. <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>HTML BASIC TAGSHTML 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> <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 BASIC TAGSHTML Paragraphs• HTML paragraphs are defined with the <p> tag. <p>This is a paragraph.</p> <p>This is another paragraph.</p>HTML BASIC TAGSHTML Line Break• HTML Line Break is defined with the <br/> tag• HTML elements with no content are called empty elements. Empty elements do not have an end tag such as the Line Break element <br/>HTML Links• HTML links are defined with the <a> tag• The link's destination is specified in the href attribute.• Attributes are used to provide additional information about HTML elements. <a href="https://www.google.com">This is a link</a> <a href="page1.html">This is a link</a> <a href="pages/page1.html">This is a link</a>HTML BASIC TAGSHTML Images• HTML images are defined with the <img> tag.• The source file (src), alternative text (alt), width, and height are provided as attributes.• The alt attribute specifies an alternative text to be used, when an image cannot be displayed. <img src="image.jpg" alt="This is an image" width="104" height="142"> <img src="images/image.jpg" alt="This is an image" width="104" height="142">HTML BASIC TAGSHTML button• HTML button defines a clickable button. <button type="button">Click Me!</button>• Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.• Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.HTML BASIC TAGSHTML div• HTML div defines a division or a section in an HTML document.• The <div> tag is used to group block-elements to format them with CSS. <div id="myId"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>Tip: The <div> element is very often used together with CSS, to layout a web page.Note: By default, browsers always place a line break before and after the <div>element. However, this can be changed with CSS.HTML BASIC TAGSHTML span• HTML span is used to group inline-elements in a document.• The <span> tag provides no visual change by itself.• The <span> tag provides a way to add a hook to a part of a text or a part of a document. <p>My mother has <span style="color:blue">blue</span> eyes.</p>Tip: When a text is hooked in a <span> element, you can style it with CSS, ormanipulate it with JavaScript.LECTURE 3 HTML TAGS (2)NESTED HTML ELEMENTS• HTML elements can be nested (elements can contain elements).• All HTML documents consist of nested HTML elements. <a href="https://www.google.com"> <img src="image.jpg" alt="google.com" width="104" height="142"> </a>HTML ELEMENTSSingle or Double Quotes?• Double quotes around attribute values are the most common in HTML, but single quotes can also be used.• In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes: <a href="page1.html">This is a link</a> <a href='page1.html'>This is a link</a>THE HTML <HEAD> ELEMENT• The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.• The <head> element is placed between the <html> tag and the <body> tag• Metadata typically define the document title, character set, styles, links, scripts, and other meta information.• The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. <meta> tags always go inside the <head> element<!DOCTYPE html><html> <head> <title>My First HTML</title> <meta charset="UTF-8" /> </head> <body> . . .HTML COMMENT TAGS• You can add comments to your HTML source by using the following syntax <!-- Write your comments here -->• Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.• Comments are not displayed by 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 --> <!--This is a comment. Comments are not displayed in the browser-->LECTURE 4 HTML FORM (1)HTML FORM EXAMPLE<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></form>THE <FORM> ELEMENT• The HTML <form> element defines a form that is used to collect user input• An HTML form contains form elements.• Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. <form> . form elements . </form>THE <INPUT> ELEMENT• The <input> element is the most important form element.• The <input> element can be displayed in several ways, depending on the type attribute. Type Description >"input type="text< Defines a one-line text input field >"input type="radio< Defines a radio button (for selecting one of many choices) >"input type="submit< Defines a submit button (for submitting the form)TEXT INPUT<input type="text"> defines a one-line input field for text input <form> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"> </form>Note: The form itself is not visible. Also note that the default width of a text field is 20characters.PASSWORD INPUT<input type="password"> defines a password fieldThe characters in a password field are masked (shown as asterisks or circles). <form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form>RADIO BUTTON INPUT<input type="radio"> defines a radio button. <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form>Note: The form itself is not visible. Also note that the default width of a text field is 20characters.CHECKBOX INPUT<input type="checkbox"> defines a checkbox.Checkboxes let a user select ZERO or MORE options of a limited number of choices.<form> <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car</form>THE VALUE ATTRIBUTEThe value attribute specifies the initial value for an input field <form action=""> First name:<br> <input type="text" name="firstname" value="John"> </form>THE SUBMIT BUTTON<input type="submit"> defines a button for submitting the form data to a form-handler.• The form-handler is typically a server page with a script for processing input data.• The form-handler is specified in the form's action attribute <form action="action_page.php"> First name:<br><input type="text" name="firstname" value="Mickey"><br> Last name:<br><input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form>THE <SELECT> ELEMENTThe <select> element defines a drop-down list: <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>• The <option> elements defines an option that can be selected.• By default, the first item in the drop-down list is selected.• To define a pre-selected option, add the selected attribute to the option: <option value="fiat" selected>Fiat</option>THE <TEXTAREA> ELEMENTThe <textarea> element defines a multi-line input field (a text area) <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>• The rows attribute specifies the visible number of lines in a text area.• The cols attribute specifies the visible width of a text area.• This is how the HTML code above will be displayed in a browserLECTURE 5 HTML FORM (2)THE ACTION ATTRIBUTE• The action attribute defines the action to be performed when the form is submitted.• Normally, the form data is sent to a web page on the server when the user clicks on the submit button.• In the example above, the form data is sent to a page on the server called "action_page.php". This page contains a server-side script that handles the form data• If the action attribute is omitted, the action is set to the current page. <form action="action_page.php">THE METHOD ATTRIBUTEThe method attribute specifies the HTTP method (GET or POST) to be used whensubmitting the form data<form action="action_page.php" method="get"><form action="action_page.php" method="post">GET VS. POSTWhen to Use GET?• The default method when submitting form data is GET. GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too• However, when GET is used, the submitted form data will be visible in the page address field action_page.php?firstname=Mickey&lastname=MouseWhen to Use POST?• Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.• POST has no size limitations, and can be used to send large amounts of data.THE NAME ATTRIBUTE• Each input field must have a name attribute to be submitted.• If the name attribute is omitted, the data of that input field will not be sent at all.• This example will only submit the "Last name" input field <form action="action_page.php"> First name:<br> <input type="text" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form>SELF STUDY• HTML Symbols (https://www.w3schools.com/html/html_symbols.asp)• HTML Charset (https://www.w3schools.com/html/html_charset.asp)• HTML Tables (https://www.w3schools.com/html/html_tables.asp)• HTML Lists (https://www.w3schools.com/html/html_lists.asp)• HTML5 New Elements (https://www.w3schools.com/html/html5_intro.asp)REFERENCES• https://www.w3schools.com/• Robin Nixon, Learning PHP, MySQL, JavaScript, and CSS, 2013• Mike McGrath, PHP & My SQL in easy steps, 2012.THE ENDYou might also likeBcac501 - It - Part-1-HtmlPDFNo ratings yetBcac501 - It - Part-1-Html117 pagesHTMLPDF100% (1)HTML74 pagesHTML NotesPDFNo ratings yetHTML Notes22 pagesBCA - (WEB PROGRAMMING) (Total 5 Units PDFPDF100% (2)BCA - (WEB PROGRAMMING) (Total 5 Units PDF153 pages(Lesson 1) HTML FundamentalsPDFNo ratings yet(Lesson 1) HTML Fundamentals43 pagesClass 8 Computer Worksheet of Introduction To HTMLPDFNo ratings yetClass 8 Computer Worksheet of Introduction To HTML8 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 /HTML113 pagesWeb Programming Unit - IPDF80% (10)Web Programming Unit - I45 pagesUnit 1 WebPDFNo ratings yetUnit 1 Web23 pagesHTML Chapter 1PDFNo ratings yetHTML Chapter 127 pagesWeb Fundamentals: Week 4PDFNo ratings yetWeb Fundamentals: Week 433 pagesAudio & Video HTMLPDFNo ratings yetAudio & Video HTML218 pagesLecture 02 - HTML Basics1PDFNo ratings yetLecture 02 - HTML Basics174 pagesWeb Designing and Development: Index - HTMLPDFNo ratings yetWeb Designing and Development: Index - HTML5 pagesHTMLPDFNo ratings yetHTML61 pagesFull Stack 2024 MSCPDFNo ratings yetFull Stack 2024 MSC34 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML99 pagesHTML Is The Standard Markup Language For Creating Web PagesPDFNo ratings yetHTML Is The Standard Markup Language For Creating Web Pages12 pagesWeb Programming Notes PDFPDFNo ratings yetWeb Programming Notes PDF82 pagesInfo2180 Lecture 2PDFNo ratings yetInfo2180 Lecture 258 pagesJava Programming Chapter-8 Servlet-1PDFNo ratings yetJava Programming Chapter-8 Servlet-154 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML7 pagesHTML SYlABUSPDFNo ratings yetHTML SYlABUS50 pagesWeb Programming NotesPDF100% (1)Web Programming Notes82 pagesAcid Control Bill 2025PDFNo ratings yetAcid Control Bill 202514 pagesAll You Should Know About HTML.PDFNo ratings yetAll You Should Know About HTML.169 pagesUnit 2PDFNo ratings yetUnit 226 pagesWT Notes PSPPDFNo ratings yetWT Notes PSP50 pagesModule 2. Introduction To HTMLPDFNo ratings yetModule 2. Introduction To HTML26 pagesHyperText Markup Language New LessonPDFNo ratings yetHyperText Markup Language New Lesson169 pagesLecture1 HTMLPDFNo ratings yetLecture1 HTML70 pagesZita - Lifelo 1587044694 APDFNo ratings yetZita - Lifelo 1587044694 A105 pagesGr7 HTML Notes 2022-23PDFNo ratings yetGr7 HTML Notes 2022-2348 pages2024 AMC Paper UpperPDF83% (6)2024 AMC Paper Upper10 pagesDos & HTML: Project ReportPDFNo ratings yetDos & HTML: Project Report17 pagesBachelore of Computer Applications ST - Xavier'S College - Krupa ShahPDFNo ratings yetBachelore of Computer Applications ST - Xavier'S College - Krupa Shah75 pagesHTML Reviewer PPDFNo ratings yetHTML Reviewer P8 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML33 pagesWebsite Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 0768572253PDFNo ratings yetWebsite Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 076857225356 pagesWeb Programming NotesPDFNo ratings yetWeb Programming Notes82 pagesHTML and CssPDFNo ratings yetHTML and Css27 pagesHTML IntroductionPDFNo ratings yetHTML Introduction36 pagesHTML5 TutorialPDFNo ratings yetHTML5 Tutorial32 pagesHTML 3PDFNo ratings yetHTML 325 pagesA Complete Reference of HTMLPDFNo ratings yetA Complete Reference of HTML160 pagesWhat Is HTML?PDFNo ratings yetWhat Is HTML?19 pagesHTML IntroductionPDFNo ratings yetHTML Introduction92 pagesHTML TutorialPDFNo ratings yetHTML Tutorial39 pagesWhat Is HTMLPDFNo ratings yetWhat Is HTML14 pagesWeb DesigningPDFNo ratings yetWeb Designing8 pagesIntroduction To HTMLPDFNo ratings yetIntroduction To HTML36 pagesPM CoveragePDFNo ratings yetPM Coverage9 pagesPascua, Nate Evan Sevdaz Bellus ICT Q1 W1PDFNo ratings yetPascua, Nate Evan Sevdaz Bellus ICT Q1 W116 pagesHTML TutorialsPDFNo ratings yetHTML Tutorials13 pagesBasic HTML: Created By-: Satish Chaudhary For SweetPDFNo ratings yetBasic HTML: Created By-: Satish Chaudhary For Sweet55 pagesGrade 10 HeredityPDFNo ratings yetGrade 10 Heredity7 pagesHTMLPDFNo ratings yetHTML14 pagesEffects of Soil and Water Conservation Techniques On Soil Productivity and Bean Grain Yield in Nyamasheke District, RwandaPDFNo ratings yetEffects of Soil and Water Conservation Techniques On Soil Productivity and Bean Grain Yield in Nyamasheke District, Rwanda91 pagesHTML Lesson 1PDFNo ratings yetHTML Lesson 15 pagesManual Plataforma Articulada 20 26MTS Diesel Haulotte Mod. Ha20px Ha26px - 042616PDF100% (2)Manual Plataforma Articulada 20 26MTS Diesel Haulotte Mod. Ha20px Ha26px - 04261670 pagesFDS1 Differential ManualPDFNo ratings yetFDS1 Differential Manual12 pagesThe Medieval English Landscape, 1000-1540PDF100% (2)The Medieval English Landscape, 1000-1540294 pagesTelephone EtiquettePDFNo ratings yetTelephone Etiquette46 pagesSoal BingPDFNo ratings yetSoal Bing29 pages5 6201599095119806830 PDFPDFNo ratings yet5 6201599095119806830 PDF224 pagesBus Bs Iii: Price List Effective 1St February' 2013PDFNo ratings yetBus Bs Iii: Price List Effective 1St February' 20138 pagesLec # 05 Plane Table SurveyPDFNo ratings yetLec # 05 Plane Table Survey32 pagesMCM Responders Training Activities - 2024PDFNo ratings yetMCM Responders Training Activities - 20245 pagesBootstrapping in Compiler DesignPDF90% (20)Bootstrapping in Compiler Design12 pagesRedemption Catalog FAPDFNo ratings yetRedemption Catalog FA16 pages STILL RX 70 Technical Data FREE PDF0% (1) STILL RX 70 Technical Data FREE 22 pages4.16 Font Styleverticalalign Inheritfont Styleverticalalign Inherittaxas de Cmbio e PreosfontfontPDFNo ratings yet4.16 Font Styleverticalalign Inheritfont Styleverticalalign Inherittaxas de Cmbio e Preosfontfont5 pagesSanta Sophia Bulletin 1 Jun 2014PDFNo ratings yetSanta Sophia Bulletin 1 Jun 20146 pagesHTML FilePDFNo ratings yetHTML File10 pagesThis A Heading This Is A Paragraph. This Is Another Paragraph.PDFNo ratings yetThis A Heading This Is A Paragraph. This Is Another Paragraph.4 pagesKSKSPDFNo ratings yetKSKS5 pagesArt 5 (Week 3)PDFNo ratings yetArt 5 (Week 3)3 pagesRefPDFNo ratings yetRef6 pagesUnit 10PDFNo ratings yetUnit 109 pagesIn Ultimate Credit Card TNCPDFNo ratings yetIn Ultimate Credit Card TNC10 pagesDaniel R. Forbes Law Enforcement/Security Professional: Mobile No: (512) 573-2746PDFNo ratings yetDaniel R. Forbes Law Enforcement/Security Professional: Mobile No: (512) 573-27463 pagesJurnal Paint 2 PDFPDFNo ratings yetJurnal Paint 2 PDF4 pagesSAFC Biosciences - Technical Bulletin - BIOEAZE Bags - Tubing and ConnectorsPDF100% (1)SAFC Biosciences - Technical Bulletin - BIOEAZE Bags - Tubing and Connectors2 pagesAbstract Vs Executive Summary-NHSPDFNo ratings yetAbstract Vs Executive Summary-NHS3 pagesMarketing Mix 4ps PNGPDF50% (2)Marketing Mix 4ps PNG2 pagesIs - 2026PDFNo ratings yetIs - 20267 pagesPharmaceutical Medical Sales Manager in Ashland KY Resume James DickisonPDFNo ratings yetPharmaceutical Medical Sales Manager in Ashland KY Resume James Dickison2 pagesUltra HTML ReferenceFrom EverandUltra HTML ReferenceMike Abelar2/5 (1)Web Development Step by StepFrom EverandWeb Development Step by StepEnrique VicenteNo ratings yetWeb Development Step by Step - HTMLFrom EverandWeb Development Step by Step - HTMLEnrique VicenteNo ratings yetDocumentsComputersInternet & Web
HTML
AI-enhanced title and description
0731213LECTURE 1 WHAT IS HTML?WHAT IS HTML?
<!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 purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.• The browser does not display the HTML tags, but uses them to determine how to display the document:HTML PAGE STRUCTURE
Follow the four steps below to create your first web page with Notepad/Notepad++ orTextEdit.• Step 1: Open Notepad/Notepad++ or TextEdit• Step 2: Write Some HTML into Notepad/Notepad++ or TextEditSTEPS TO CREATE A WEB PAGE
Follow the four steps below to create your first web page with Notepad/Notepad++ orTextEdit.• Step 3: Save the HTML PageSTEPS TO CREATE A WEB PAGE
Follow the four steps below to create your first web page with Notepad or TextEdit.• Step 4: View the HTML Page in Your BrowserLECTURE 2 HTML TAGS (1)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>. <!DOCTYPE html>
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>HTML BASIC TAGS
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> <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 BASIC TAGS
HTML Paragraphs• HTML paragraphs are defined with the <p> tag. <p>This is a paragraph.</p> <p>This is another paragraph.</p>HTML BASIC TAGS
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 alt attribute specifies an alternative text to be used, when an image cannot be displayed. <img src="image.jpg" alt="This is an image" width="104" height="142"> <img src="images/image.jpg" alt="This is an image" width="104" height="142">HTML BASIC TAGS
HTML button• HTML button defines a clickable button. <button type="button">Click Me!</button>• Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.• Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.HTML BASIC TAGS
HTML div• HTML div defines a division or a section in an HTML document.• The <div> tag is used to group block-elements to format them with CSS. <div id="myId"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>Tip: The <div> element is very often used together with CSS, to layout a web page.Note: By default, browsers always place a line break before and after the <div>element. However, this can be changed with CSS.HTML BASIC TAGS
HTML span• HTML span is used to group inline-elements in a document.• The <span> tag provides no visual change by itself.• The <span> tag provides a way to add a hook to a part of a text or a part of a document. <p>My mother has <span style="color:blue">blue</span> eyes.</p>
Tip: When a text is hooked in a <span> element, you can style it with CSS, ormanipulate it with JavaScript.LECTURE 3 HTML TAGS (2)NESTED HTML ELEMENTS
• You can add comments to your HTML source by using the following syntax <!-- Write your comments here -->• Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.• Comments are not displayed by the browser, but they can help document your HTML source code. <!-- This is a comment -->
<p>This is a paragraph.</p>
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></form>THE <FORM> ELEMENT
• The HTML <form> element defines a form that is used to collect user input• An HTML form contains form elements.• Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. <form> . form elements . </form>THE <INPUT> ELEMENT
Type Description >"input type="text< Defines a one-line text input field >"input type="radio< Defines a radio button (for selecting one of many choices) >"input type="submit< Defines a submit button (for submitting the form)TEXT INPUT
<form> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"> </form>Note: The form itself is not visible. Also note that the default width of a text field is 20characters.PASSWORD INPUT
<form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form>RADIO BUTTON INPUT
<form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form>
Note: The form itself is not visible. Also note that the default width of a text field is 20characters.CHECKBOX INPUT
<form> <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car</form>THE VALUE ATTRIBUTE
The value attribute specifies the initial value for an input field <form action=""> First name:<br> <input type="text" name="firstname" value="John"> </form>THE SUBMIT BUTTON
<input type="submit"> defines a button for submitting the form data to a form-handler.• The form-handler is typically a server page with a script for processing input data.• The form-handler is specified in the form's action attribute
<form action="action_page.php"> First name:<br><input type="text" name="firstname" value="Mickey"><br> Last name:<br><input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form>THE <SELECT> ELEMENT
• The action attribute defines the action to be performed when the form is submitted.• Normally, the form data is sent to a web page on the server when the user clicks on the submit button.• In the example above, the form data is sent to a page on the server called "action_page.php". This page contains a server-side script that handles the form data• If the action attribute is omitted, the action is set to the current page. <form action="action_page.php">THE METHOD ATTRIBUTE
The method attribute specifies the HTTP method (GET or POST) to be used whensubmitting the form data<form action="action_page.php" method="get"><form action="action_page.php" method="post">GET VS. POST