Download to read offline
![MATCHING A PATTERN
For cases when we want user input to follow specific guidelines, we use the pattern attribute and assign it a
regular expression, or regex. Regular expressions are a sequence of characters that make up a search
pattern. If the input matches the regex, the form can be submitted.
<form action="/example.html" method="POST">
<label for="payment">Credit Card Number (no spaces):</label>
<br>
<input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
<input type="submit" value="Submit">
</form>
Let’s say we wanted to check for a valid credit card number (a 14 to 16 digit number). We could use the
regex: [0-9]{14,16} which checks that the user provided only numbers and that they entered at least 14 digits
and at most 16 digits.](https://image.slidesharecdn.com/3-231002133508-e4e9ac51/75/HTML-pptx-47-2048.jpg)
![MATCHING A PATTERN
For cases when we want user input to follow specific guidelines, we use the pattern attribute and assign it a
regular expression, or regex. Regular expressions are a sequence of characters that make up a search
pattern. If the input matches the regex, the form can be submitted.
<form action="/example.html" method="POST">
<label for="payment">Credit Card Number (no spaces):</label>
<br>
<input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
<input type="submit" value="Submit">
</form>
Let’s say we wanted to check for a valid credit card number (a 14 to 16 digit number). We could use the
regex: [0-9]{14,16} which checks that the user provided only numbers and that they entered at least 14 digits
and at most 16 digits.](https://crownmelresort.com/image.slidesharecdn.com/3-231002133508-e4e9ac51/75/HTML-pptx-47-2048.jpg)
HTML.pptx
- 1. HTML: HYPER TEXTMARKUP LANGUAGE BY ARPITA TIWARI
- 2. INTRODUCTION OF HTML HTML provides structure to the content appearing on a website, such as images, text, or videos. Right-click on any page on the internet, choose “Inspect,” and you’ll see HTML in a panel of your screen. HTML stands for HyperText Markup Language: A markup language is a computer language that defines the structure and presentation of raw text. In HTML, the computer can interpret raw text that is wrapped in HTML elements. HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks.
- 3. HTLM BASIC SYNTAX HTML code starts with: <!DOCTYPE html> The <!DOCTYPE html> declaration defines that this document is an HTML5 document. The <!DOCTYPE> declaration is not case sensitive. The <html> element is the root element of an HTML page. The <head> element contains meta information about the HTML page. The <title> element specifies a title for the HTML page. comments in HTML source is written as: <!-- Write your comments here --> <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 4. THE BODY Oneof the key HTML elements we use to build a webpage is the body element. Only content inside the opening and closing body tags can be displayed to the screen. <body> ….. </body> Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body. While some browsers may render some content outside body tags as well to accommodate the occasional mistake in your HTML, not all browsers do this! The best way to ensure that all your HTML renders the same way in all browsers is to ensure that your elements remain within the opening and closing body tags.
- 5. HTML ELEMENT HTMLis composed of elements. These elements structure the webpage and define its content. element is made up of: An opening tag (<p>) The content (“Hello World!” text) A closing tag (</p>
- 6. HTML ELEMENT HTMLelement (or simply, element) — a unit of content in an HTML document formed by HTML tags and the text or media it contains. HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket. Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets. Content — The information (text or other elements) contained between the opening and closing tags of an HTML element. Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.
- 7. HTML STRUCTURE HTMLis organized as a collection of family tree relationships. In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are at the same level, they are considered siblings and are both grandchildren of the <body> element. Child elements can inherit behavior and styling from their parent element. <body> <div> <h1> ………..bling to p, but also grandchild of body </h1> <p>Sibling to h1, but also grandchild of body </p> </div> </body>
- 8. HEADINGS Headings inHTML are similar to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader’s attention. HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size. 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 <h1> — used for main headings. All other smaller headings are used for subheadings. <h2> <h3> <h4> <h5> <h6> Use HTML headings for headings only. Don't use headings to make text BIG or bold.
- 9. DIV ELEMENT Oneof the most popular elements in HTML is the <div> element. <div> is short for “division” or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together. <body> <div> <h1>Why use div</h1> <p>Great for gro </p> </div> </body>
- 10. ATTRIBUTES All HTMLelements can have attributes. Attributes provide additional information about elements. Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. Attributes are made up of the following two parts: The name of the attribute The value of the attribute <body> <h1>My school</h1> <div id="introduction"> <h2>………….</h2> <h3>…………</h3> <h3>………….</h3> </div> <div id=“content"> <h2>……..</h2> <p>……</p> <h3>………</h3> </div> <div id= “conclusion"> <h2>……….</h2> </div> </body>
- 11. DISPLAY TEXT Ifyou want to display text in HTML, you can use a paragraph or span element: Paragraphs (<p>)contain a block of plain text. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed <span> contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content. Use <br> if you want a line break (a new line). The <hr> element is used to separate content by horizontal line.
- 12. STYLING TEXT Tag Description <b>Defines bold text <em> Defines emphasized text <i> Defines a part of text in an alternate voice or mood <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text
- 13. UNORDERED LISTS InHTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point. The <ul> element should not hold raw text and won’t automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list. <h2>Skill Set:</h2> <ul> <li>Java</li> <li>C/C++</li> <li>Python</li> <li>HTML,CSS, JS</li> <li>SQL</li> </ul> Output
- 14. ORDERED LISTS Orderedlists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last. You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags. <h2>Skill Set:</h2> <ol> <li>Java</li> <li>C/C++</li> <li>Python</li> <li>HTML,CSS, JS</li> <li>SQL</li> </ol> Output
- 15. IMAGES The <img>tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash / both will render properly. The <img> tag has a required attribute called src. The src attribute must be set to the image’s source, or the location of the image. In this case, the value of src must be the uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored. <img src="image-location.jpg" /> The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
- 16. VIDEOS In additionto images, HTML also supports displaying videos. Like the <img> element, the <video> element requires a src attribute with a link to the video source. Unlike the <img> element however, the <video> element requires an opening and a closing tag. <video src="myVideo.mp4" width="320" height="240" controls> Video not supported </video> In this example, the video source (src) is "myVideo.mp4". The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage. After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls such as pausing and playing. The text, Video not supported, between the opening and closing video tags will only be displayed if the browser is unable to load the video.
- 17. LINKING TO OTHERWEB PAGES One of the powerful aspects of HTML (and the Internet), is the ability to link to other web pages. You can add links to a web page by adding an anchor element <a> and including the text of the link in between the opening and closing tags. The anchor element is incomplete without the href attribute. This attribute stands for hyperlink reference and is used to link to a path, or the address to where a file is located (whether it is on your computer or another location). The paths provided to the href attribute are often URLs. <a href="https://www.wikipedia.org/">This Is a Link To Wikipedia</a> For a link to open in a new window, the target attribute requires a value of _blank. The target attribute can be added directly to the opening tag of the anchor element, just like the href attribute. <a href=“https://www.wikipedia.org/”, target=“_blank”>This Is a Link To Wikipedia</a>
- 18. LINKING TO RELATIVEPAGE Thus far you have learned how to link to external web pages. Many sites also link to internal web pages like Home, About, and Contact. Before we learn how to link between internal pages, let’s establish where our files are stored. When making multi-page static websites, web developers often store HTML files in the root directory, or a main folder where all the files for the project are stored. As the size of the projects you create grows, you may use additional folders within the main project folder to organize your code.
- 19. LINKING TO RELATIVEPAGE The example above shows three different files — about.html, contact.html, and index.html in one folder. HTML files are often stored in the same folder, as shown in the example above. If the browser is currently displaying index.html, it also knows that about.html and contact.html are in the same folder. Because the files are stored in the same folder, we can link web pages together using a relative path. <a href="./contact.html">Contact</a> In this example, the <a> tag is used with a relative path to link from the current HTML file to the contact.html file in the same folder. On the web page, Contact will appear as a link. A relative path is a filename that shows the path to a local file.
- 20. TRY THIS VALUESIN TARGET ATTRIBUTE The target attribute can have one of the following values: • _self - Default. Opens the document in the same window/tab as it was clicked • _blank - Opens the document in a new window or tab • _parent - Opens the document in the parent frame • _top - Opens the document in the full body of the window.
- 21. INTRODUCTION TO TABLES Before displaying data, we must first create the table that will contain the data by using the <table> element. The <table> element will contain all of the tabular data we plan on displaying. In many programs that use tables, the table is already predefined for you, meaning that it contains the rows, columns, and cells that will hold data. In HTML, all of these components must be created. The first step in entering data into the table is to add rows using the table row element: <tr>. Rows aren’t sufficient to add data to a table. Each cell element must also be defined. In HTML, you can add data using the table data element: <td>. Table data doesn’t make much sense without titles to describe what the data represents. To add titles to rows and columns, you can use the table heading element: <th>.
- 22. EXAMPLE OF ATABLE: What happened in the code above? First, a new row was added to hold the three headings: a blank heading, a Saturday heading, and a Sunday heading. The blank heading creates the extra table cell necessary to align the table headings correctly over the data they correspond to. In the second row, one table heading was added as a row title: Temperature. A border could be added to a table using the border attribute and setting it equal to an integer. This integer would represent the thickness of the border. <table border=“1”> <tr> <th></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> <tr> <th scope="row">Temperature</th> <td>73</td> <td>81</td> </tr> </table>
- 23. SPANNING COLUMNS (MERGINGCOLUMN) Data can span columns using the colspan attribute. The attribute accepts an integer (greater than or equal to 1) to denote the number of columns it spans across. <table border="2"> <tr> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> </tr> <tr> <td colspan="2">Out of Town</td> <td>Back in Town</td> </tr> </table>
- 24. SPANNING ROWS (MERGINGROW) Data can also span multiple rows using the rowspan attribute. The rowspan attribute is used for data that spans multiple rows (perhaps an event goes on for multiple hours on a certain day). It accepts an integer (greater than or equal to 1) to denote the number of rows it spans across. <table border="2"> <tr> <!-- Row 1 --> <th></th> <th>Saturday</th> <th>Sunday</th> </tr> <tr> <!-- Row 2 --> <th>Morning</th> <td rowspan="2">Work</td> <td rowspan="3">Relax</td> </tr> <tr> <!-- Row 3 --> <th>Afternoon</th> </tr> <tr> <!-- Row 4 --> <th>Evening</th> <td>Dinner</td> </tr> </table>
- 25. TABLE BODY, TABLEHEAD AND TABLE FOOTER Over time, a table can grow to contain a lot of data and become very long. When this happens, the table can be sectioned off so that it is easier to manage. Long tables can be sectioned off using the table body element: <tbody>. The <tbody> element should contain all of the table’s data, excluding the table headings. When a table’s body is sectioned off, however, it also makes sense to section off the table’s column headings using the <thead> element. The bottom part of a long table can also be sectioned off using the <tfoot> element.
- 26. INTRODUCTION TO HTMLFORMS Just like a physical form, an HTML <form> element is responsible for collecting information to send somewhere else. Every time we browse the internet we come into contact with many forms and we might not even realize it. There’s a good chance that if you’re typing into a text field or providing an input, the field that you’re typing into is part of a <form>! In this lesson, we’ll go over the structure and syntax of a <form> and the many elements that populate it.
- 27. HOW A FORMWORKS We can think of the internet as a network of computers which send and receive information. Computers need an HTTP request to know how to communicate. The HTTP request instructs the receiving computer how to handle the incoming information. The <form> element is a great tool for collecting information, but then we need to send that information somewhere else for processing. We need to supply the <form> element with both the location of where the <form>‘s information goes and what HTTP request to make. Take a look at the sample <form> below: <form action="/example.html" method="POST"> </form> In the above example, we’ve created the skeleton for a <form> that will send information to example.html as a POST request: The action attribute determines where the information is sent. The method attribute is assigned a HTTP verb that is included in the HTTP request.
- 28. TEXT INPUT The<input> element has a type attribute which determines how it renders on the web page and what kind of data it can accept. The first value for the type attribute we’re going to explore is "text". When we create an <input> element with type="text", it renders a text field that users can type into. Note that the default value of type is "text". It’s also important that we include a name attribute for the <input> — without the name attribute, information in the <input> won’t be sent when the <form> is submitted. We’ll explain more about submissions and the submit button in a later exercise. <form action="/example.html" method="POST"> <input type="text" name="first-text-field"> </form> Output
- 29. THE <INPUT> ELEMENT When initially loaded, it will be an empty box: After users type into the <input> element, the value of the value attribute becomes what is typed into the text field. The value of the value attribute is paired with the value of the name attribute and sent as text when the form is submitted. For instance, if a user typed in “important details” in the text field created by our <input> element: When the form is submitted, the text: "first-text-field=important details" is sent to /example.html because the value of the name attribute is "first-text-field" and the value of value is "important details". We could also assign a default value for the value attribute so that users have a pre-filled text field when they first see the rendered form like so:
- 30. THE <INPUT> ELEMENT TypeDescription <input type="text"> Displays a single-line text input field <input type="radio"> Displays a radio button (for selecting one of many choices) <input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices) <input type="submit"> Displays a submit button (for submitting the form) <input type="button"> Displays a clickable button
- 31. HTML INPUT TYPES 1.<inputtype="button"> 2.<input type="checkbox"> 3.<input type="color"> 4.<input type="date"> 5.<input type="datetime-local"> 6.<input type="email"> 7.<input type="file"> 8.<input type="hidden"> 9.<input type="image"> 10.<input type="month"> 11.<input type="number"> 12.<input type="password"> 13.<input type="radio"> 14.<input type="range"> 15.<input type="reset"> 16.<input type="search"> 17.<input type="submit"> 18.<input type="tel"> 19.<input type="text"> 20.<input type="time"> 21.<input type="url"> 22.<input type="week">
- 32. ADDING A LABEL The <label> element has an opening and closing tag and displays text that is written between the opening and closing tags. To associate a <label> and an <input>, the <input> needs an id attribute. We then assign the for attribute of the <label> element with the value of the id attribute of <input>, like so: <form action="/example.html" method="POST"> <label for=“fname">What is your first name?</label> <br> <input type="text" name="food" id=“fname"> </form>
- 33. PASSWORD INPUT An<input type ="password"> element will replace input text with another character like an asterisk (*) or a dot (•). <form action="/example.html" method="POST"> <label for=“uname">Type a user name?</label><br> <input type="text" name=“uname" id=“uname"><br> <label for="user-password">Password: </label><br> <input type="password" id="user-password" name="user-password"> </form>
- 34. NUMBER INPUT Bysetting type="number" for an <input> we can restrict what users type into the input field to just numbers (and a few special characters like -, +, and .). We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute. <form action="/example.html" method="POST"> <label for=“uname">Type a user name?</label> <br> <input type="text" name="food" id=“fname"><br> <label for="user-password">Password: </label><br> <input type="password" id="user-password" name="user-password"><br> <label for="years"> Years of experience: </label><br> <input id="years" name="years" type="number" step="1"><br> <hr> </form>
- 35. RANGE INPUT Usingan <input type="number"> is great if we want to allow users to type in any number of their choosing. But, if we wanted to limit what numbers our users could type we might consider using a different type value. Another option we could use is setting type to "range" which creates a slider. To set the minimum and maximum values of the slider we assign values to the min and max attribute of the <input>. We could also control how smooth and fluid the slider works by assigning the step attribute a value. Smaller step values will make the slider move more fluidly, whereas larger step values will make the slider move more noticeably. Take a look at the code to create a slider: <form> <label for="volume"> Volume Control</label><br> <input id="volume" name="volume" type="range" min="0" max="100" step="1"> <br> </form>
- 36. CHECKBOX INPUT Ina <form> we would use the <input> element and set type="checkbox". Examine the code used to create multiple checkboxes: <form> <label for="cheese">Extra cheese</label> <input id="cheese" name="topping" type="checkbox" value="cheese"> <br> <label for="pepperoni">Pepperoni</label> <input id="pepperoni" name="topping" type="checkbox" value="pepperoni"> <br> <label for="anchovy">Anchovy</label> <input id="anchovy" name="topping" type="checkbox" value="anchovy"> </form>
- 38. RADIO BUTTON INPUT Checkboxes work well if we want to present users with multiple options and let them choose one or more of the options. However, there are cases where we want to present multiple options and only allow for one selection — like asking users if they agree or disagree with the terms and conditions. Let’s look over the code used to create radio buttons: <form> <p>What is sum of 1 + 1?</p> <input type="radio" id="two" name="answer" value="2"> <label for="two">2</label> <br> <input type="radio" id="eleven" name="answer" value="11"> <label for="eleven">11</label> </form>
- 39. DATALIST INPUT Evenif we have an organized dropdown list, if the list has a lot of options, it could be tedious for users to scroll through the entire list to locate one option. That’s where using the <datalist> element comes in handy. The <datalist> is used with an <input type="text"> element. The <input> creates a text field that users can type into and filter options from the <datalist>. Let’s go over a concrete example: <form> <label> <input typr=“text” id=“city” name=“city” list="cities">> <datalist id="cities"> <option value="New York City"></option> <option value="Tokyo"></option> <option value="Barcelona"></option> <option value="Mexico City"></option> <option value="Melbourne"></option> <option value="Other"></option> </datalist> </form>
- 40. DROPDOWN LIST Radiobuttons are great if we want our users to pick one option out of a few visible options, but imagine if we have a whole list of options! This situation could quickly lead to a lot of radio buttons to keep track of. An alternative solution is to use a dropdown list to allow our users to choose one option from an organized list. Here’s the code to create a dropdown menu: <form> <label for="lunch">What's for lunch?</label> <select id="lunch" name="lunch"> <option value="pizza">Pizza</option> <option value="curry">Curry</option> <option value="salad">Salad</option> <option value="ramen">Ramen</option> <option value="tacos">Tacos</option> </select> </form>
- 41. TEXTAREA ELEMENT An<input> element with type="text" creates a single row input field for users to type in information. However, there are cases where users need to write in more information, like a blog post. In such cases, instead of using an <input>, we could use <textarea>. The <textarea> element is used to create a bigger text field for users to write more text. We can add the attributes rows and cols to determine the amount of rows and columns for the <textarea>. Take a look: </form> <label for="blog">New Blog Post: </label> <br> <textarea id="blog" name="blog" rows="5" cols="30"> </textarea> </form>
- 42. SUBMIT FORM Tomake a submit button in a <form>, we’re going to use the reliable <input> element and set the type to "submit". For instance: <input type="submit" value="Submit">
- 43. HTML FORM VALIDATION Validation is the concept of checking user provided data against the required data. There are different types of validation. One type is server-side validation, this happens when data is sent to another machine (typically a server) for validation. An example of this type of validation is the usage of a login page. The form on the login page accepts username and password input, then sends the data to a server that checks that the pair matches up correctly. On the other hand, we use client-side validation if we want to check the data on the browser (the client). This validation occurs before data is sent to the server. Different browsers implement client-side validation differently, but it leads to the same outcome.
- 44. REQUIRING AN INPUT(MANDATORY FIELD) Sometimes we have fields in our <form> which are not optional, i.e. there must be information provided before we can submit it. To enforce this rule, we can add the required attribute to an <input> element. <form action="/example.html" method="POST"> <label for=“fname">What is your Full name?</label> <br> <input type="text" id="fname" name="fname“ required> <br>
- 45. SET A MINIMUMAND MAXIMUM Another built-in validation we can use is to assign a minimum or maximum value for a number field, e.g. <input type="number"> and <input type="range">. To set a minimum acceptable value, we use the min attribute and assign a value. On the flip side, to set a maximum acceptable value, we assign the max attribute a value. <form action="/example.html" method="POST"> <label for="guests">Enter the number of guests:</label><br> <input id="guests" name="guests" type="number" min="1" max="4"><br> <br> <input type="submit" value="Submit"> </form>
- 46. CHECKING TEXT LENGTH There are certainly cases where we wouldn’t want our users typing more than a certain number of characters (think about the character cap for messages on Twitter). We might even want to set a minimum number of characters. Conveniently, there are built-in HTML5 validations for these situations. To set a minimum number of characters for a text field, we add the minlength attribute and a value to set a minimum value. Similarly, to set the maximum number of characters for a text field, we use the maxlength attribute and set a maximum value. Let’s take a look at these attributes in code: <form action="/example.html" method="POST"> <label for="summary">Summarize in less than 250 characters</label><br> <input id="summary" name="summary" type="text" minlength="5" maxlength="250" required> <br><br> <input type="submit" value="Submit"> </form>
- 47. MATCHING A PATTERN For cases when we want user input to follow specific guidelines, we use the pattern attribute and assign it a regular expression, or regex. Regular expressions are a sequence of characters that make up a search pattern. If the input matches the regex, the form can be submitted. <form action="/example.html" method="POST"> <label for="payment">Credit Card Number (no spaces):</label> <br> <input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}"> <input type="submit" value="Submit"> </form> Let’s say we wanted to check for a valid credit card number (a 14 to 16 digit number). We could use the regex: [0-9]{14,16} which checks that the user provided only numbers and that they entered at least 14 digits and at most 16 digits.
- 48.