HTML Background Images & Tables (PDF)

The background-image property is used to specify the URL of the background image. background-size: cover; ensures that the background image covers the entire background. background-repeat: no-repeat; prevents the image from repeating. background-position: center; centers the image within the b...

The background-image property is used to specify the URL of the background image. background-size: cover; ensures that the background image covers the entire background. background-repeat: no-repeat; prevents the image from repeating. background-position: center; centers the image within the body. There are various methods to incorporate a background image in HTML, which vary depending on the desired appearance on the element. For instance, by employing CSS properties like background size, background-position, background-repeat, and background-attachment. Here are some examples of how to add a background image in HTML, using different CSS properties: To add, one can regulate the size, position, repetition, and attachment aspects of the background image. Below are a few examples illustrating different CSS properties used to add a background image in HTML: To include a background image that spans across the entire page, use the following code: This code snippet allows the image file named \"img\_girl.jpg\" to be set as the background image for the body element. It is important to ensure that the image file is located in the same folder as the HTML file or to provide the accurate file path. To achieve a background image that covers the entire element without repeating or stretching, the following code can be utilized: This will assign the value \"cover\" to the background-size property, indicating that the image will be proportionally scaled to fit the element. To achieve a fixed background image that remains unaffected by page scrolling, you can utilize the following code: The difference between background image and illustrative images is mainly semantic and functional. Background images are used to enhance the appearance or layout of an element, such as a or a and are not part of the content. Illustrative images are used to convey information or meaning, such as a logo, a diagram, or a photo, and are part of the content. Background images are set using the CSS background-image property, while illustrative images are embedded using the HTML **Error! Filename not specified.**tag. What is Html Table: A table in HTML serves as a means to systematically arrange and present data in rows and columns. Tables prove to be advantageous when presenting structured information with interrelated data types. For instance, tables can be utilized to exhibit the names and ages of various individuals or the prices and characteristics of diverse products. To create a table in HTML, you need to use the following elements: -------------------------------------------------------------------------------------------- : This element defines the table and contains all the other elements related to the table. -------------------------------------------------------------------------------------------- : This element defines a table row, which can have one or more table cells. : This element defines a table cell, which can contain any HTML content, such as text, images, links, etc. : This element defines a table header, which is a special type of table cell that usually appears at the top or left of the table. Table headers are used to label the columns or rows of the table and make them easier to understand. **Firstname** **Lastname** **Age** --------------- -------------- --------- Priya Sharma 24 Arun Singh 32 Sam Watson 41 ADVANTAGES OF HTML TABLES: They can organize and display data in rows and columns, making it easy to read and compare. They can contain various types of content, such as text, images, lists, links, and other tables. They can be styled with CSS to enhance their appearance and functionality. They can be accessed by screen readers and other assistive technologies, improving the accessibility of the web page. DISADVANTAGES OF HTML TABLES: Inefficient and messy code: HTML tables require a lot of tags and attributes to create a grid structure, which makes the code hard to read and debug. It also increases the file size and loading time of the web page. Lack of flexibility and responsiveness: HTML tables are not designed to adapt to different screen sizes and devices, which can affect the user experience and accessibility of the web page. It is also difficult to change the layout or design of the web page using tables, as it requires modifying the entire table structure. Poor semantic meaning and SEO: HTML tables do not convey the logical structure and meaning of the web page content, which can confuse the search engines and the users. Tables are meant for displaying tabular data, not for layout purposes. Using tables for layout can also affect the ranking and visibility of the web page in the search results. Definition of an HTML Table attributes: A table attribute is a property or characteristic of a table that defines its appearance or behavior. For instance, the border attribute defines the width of the border surrounding the table cells, while the align attribute specifies the horizontal alignment of the table within the document. Typically, table attributes are indicated within the opening +-----------------------------------+-----------------------------------+ | tag of an HTML document. HTML | means the cell will occupy three | | table attributes serve the | rows. WIDTH: This attribute sets | | purpose of altering the | the width of the table or a cell. | | presentation and functionality of | It can be either a fixed value in | | tables. Several commonly employed | pixels or a percentage of the | | attributes include: BORDER: This | available space. For example, | | attribute determines the | | | magnitude of the border | +--------------+--------------+ | | surrounding the table and its | | means the | and | | | cells. The value can be expressed | | table will | | | | in pixels or as a percentage of | | have a width | tags of the | | | the table\'s width. For instance, | | of 500 | outer table. | | | one may specify border=\"1\" or | | pixels, | A nested | | | border=\"10%\". For border | | while | table proves | | | styling via CSS, it is | | | useful for | | | recommended to utilize the border | | means the | presenting | | | property instead. 35 CELLPADDING: | | cell will | intricate | | | This attribute determines the | | take up half | data or | | | spacing between the content of a | | of the table | layouts. It | | | cell and its border. The value | | width. | is important | | | can be specified in pixels or as | | BGCOLOR: | to note that | | | a percentage of the cell width. | | This | a nested | | | For instance, cellpadding=\"5\" | | property | table does | | | or cellpadding=\"10%\". To | | determines | not adopt | | | specify the padding using CSS, | | the | the | | | the padding property should be | | background | formatting | | | employed instead. CELL SPACING: | | color of the | of the outer | | | This attribute determines the | | table. The | table and 36 | | | spacing between the cells of a | | value can be | 37 | | | table. The value can be specified | | specified as | necessitates | | | in pixels or as a percentage of | | a color | its own | | | the table width. For instance, | | name, a | attributes. | | | cellspacing=\"10\" or | | hexadecimal | It is | | | cellspacing=\"5%\". To define the | | code, or an | generally | | | spacing using CSS, employ the | | RGB value. | discouraged | | | border-spacing property instead. | | For | to employ | | | COLSPAN: This attribute specifies | | instance, | nested | | | the number of columns a cell | | bgcolor=\"re | tables as | | | should span. For example, | | d\", | they tend to | | | | | bgcolor=\"\# | complicate | | | means the cell will occupy two | | FF0000\", | the markup | | | columns. ROWSPAN: This attribute | | or | and diminish | | | specifies the number of rows a | | bgcolor=\"rg | accessibilit | | | cell should span. For example, | | b(255,0,0)\" | y. | | | | |. | An example | | | | | To set the | of a nested | | | | | background | table in | | | | | color using | HTML: | | | | | CSS, it is | | | | | | recommended | | | | | | to use the | | | | | | background-c | | | | | | instead. | | | | | | used to | | | | | | table on the | | | | | | page. The | | | | | | value can be | | | | | | or center. | Outer ta | | | | | For | ble cell 1 | | | | | align=\"cent | Outer ta | | | | | er\". | ble cell 2 | | | | | table using | Outer ta | | | | | CSS, the | ble cell 3 | | | | | property | | | | | | should be | | | | | | utilized | | | | | | instead. | | | | | | OF A NESTED | | | | | | TABLE IN | | | | | | HTML: An | | | | | | table refers | Inner ta | | | | | to a table | ble cell 1 | | | | | constructed | Inner ta | | | | | within | ble cell 2 | | | | | table within | | | | | | the same | | | | | | webpage. The | | | | | | inner table | | | | | | positioned | Inner ta | | | | | between the | ble cell 3 | | | | | | Inner ta | | | | | | ble cell 4 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | What is HTML | | | | | | Form: A form | | | | | | in HTML | | | | | | refers to a | | | | | | designated | | | | | | section | | | | | | within a | | | | | | document | | | | | | that | | | | | | facilitates | | | | | | the | | | | | | gathering of | | | | | | user input | | | | | | and | | | | | | subsequent | | | | | | transmission | | | | | | to a server | | | | | | for | | | | | | processing. | | | | | | This | | | | | | component | | | | | | can | | | | | | encompass a | | | | | | variety of | | | | | | input | | | | | | elements, | | | | | | including | | | | | | but not | | | | | | limited to | | | | | | text fields, | | | | | | buttons, | | | | | | checkboxes, | | | | | | and radio | | | | | | buttons. The | | | | | | creation of | | | | | | a form is | | | | | | accomplished | | | | | | through the | | | | | | utilization | | | | | | of the | | | | | | | | | | | | Top of Form | | | | | | | | | | | | element, | | | | | | which | | | | | | possesses | | | | | | multiple | | | | | | attributes | | | | | | to specify | | | | | | the action, | | | | | | method, and | | | | | | encoding | | | | | | associated | | | | | | with the | | | | | | form data. | | | | | | Some of the | | | | | | common | | | | | | attributes | | | | | | for HTML | | | | | | forms are: | | | | | | The action | | | | | | attribute | | | | | | specifies | | | | | | the URL of | | | | | | the file | | | | | | that will | | | | | | handle the | | | | | | form data | | | | | | when the | | | | | | form is | | | | | | submitted. | | | | | | For | | | | | | instance, | | | | | | | | | | | | Top of Form | | | | | | | | | | | | will send | | | | | | the form | | | | | | data to a | | | | | | file named | | | | | | action\_page | | | | | |.php | | | | | | on the | | | | | | server. The | | | | | | method | | | | | | attribute | | | | | | specifies | | | | | | the HTTP | | | | | | method to be | | | | | | used when | | | | | | sending the | | | | | | form data. | | | | | | The two most | | | | | | common | | | | | | methods are | | | | | | get and | | | | | | post. The | | | | | | get method | | | | | | appends the | | | | | | form data to | | | | | | the URL as | | | | | | name/value | | | | | | pairs, while | | | | | | the post | | | | | | method sends | | | | | | the form | | | | | | data inside | | | | | | the body of | | | | | | the HTTP | | | | | | request. The | | | | | | post method | | | | | | is preferred | | | | | | for sending | | | | | | large or | | | | | | sensitive | | | | | | data. For | | | | | | example, | | | | | | | | | | | | Top of Form | | | | | | | | | | | | will use the | | | | | | post method | | | | | | to send the | | | | | | form data. | | | | | | The target | | | | | | attribute | | | | | | specifies | | | | | | where to | | | | | | display the | | | | | | response | | | | | | that is | | | | | | received | | | | | | after | | | | | | submitting | | | | | | the form. | | | | | | The target | | | | | | attribute | | | | | | can have | | | | | | values such | | | | | | as \_blank, | | | | | | \_self, | | | | | | \_parent, | | | | | | \_top, or a | | | | | | frame name. | | | | | | The default | | | | | | value is | | | | | | \_self, | | | | | | which means | | | | | | that the | | | | | | response | | | | | | will open in | | | | | | the current | | | | | | window. For | | | | | | instance, | | | | | | | | | | | | Top of Form | | | | | | | | | | | | will open | | | | | | the response | | | | | | in a new | | | | | | window or | | | | | | tab. The | | | | | | autocomplete | | | | | | attribute | | | | | | specifies | | | | | | whether the | | | | | | browser | | | | | | should | | | | | | automaticall | | | | | | y | | | | | | fill in the | | | | | | values of | | | | | | the input | | | | | | fields based | | | | | | on previous | | | | | | entries by | | | | | | the user. | | | | | | The | | | | | | autocomplete | | | | | | attribute | | | | | | can have | | | | | | values such | | | | | | as on or | | | | | | off. The | | | | | | default | | | | | | value is on, | | | | | | which means | | | | | | that the | | | | | | browser will | | | | | | try to | | | | | | autocomplete | | | | | | the input | | | | | | fields. For | | | | | | instance, | | | | | | | | | | | | Top of Form | | | | | | | | | | | | will disable | | | | | | the | | | | | | autocomplete | | | | | | feature for | | | | | | the form. | | | | | | The form | | | | | | attribute | | | | | | specifies | | | | | | the id of | | | | | | the form | | | | | | that the | | | | | | input | | | | | | element | | | | | | belongs to. | | | | | | This | | | | | | attribute | | | | | | can be used | | | | | | to associate | | | | | | an input | | | | | | element with | | | | | | a form that | | | | | | is not its | | | | | | parent | | | | | | element. For | | | | | | instance, | | | | | | will belong | | | | | | to the form | | | | | | with id | | | | | | myForm, even | | | | | | if it is | | | | | | outside the | | | | | | form | | | | | | element. 38 | | | | | | The name | | | | | | attribute | | | | | | denotes the | | | | | | name of the | | | | | | input | | | | | | element, | | | | | | which serves | | | | | | as an | | | | | | identifier | | | | | | for the | | | | | | input value | | | | | | when | | | | | | transmitting | | | | | | form data to | | | | | | the server. | | | | | | For | | | | | | instance: | | | | | | The type | | | | | | attribute | | | | | | designates | | | | | | the type of | | | | | | the input | | | | | | element, | | | | | | which can | | | | | | take on | | | | | | various | | | | | | values such | | | | | | as text, | | | | | | radio, | | | | | | checkbox, | | | | | | submit, | | | | | | button, etc. | | | | | | Each type | | | | | | possesses | | | | | | its own | | | | | | visual | | | | | | representati | | | | | | on | | | | | | and | | | | | | functionalit | | | | | | y. | | | | | | For example: | | | | | | or The value | | | | | | attribute | | | | | | specifies | | | | | | the initial | | | | | | or default | | | | | | value of the | | | | | | input | | | | | | element. For | | | | | | example: The | | | | | | placeholder | | | | | | attribute | | | | | | provides a | | | | | | hint or | | | | | | brief | | | | | | description | | | | | | of the | | | | | | expected | | | | | | input value. | | | | | | It is shown | | | | | | within the | | | | | | input field | | | | | | until the | | | | | | user enters | | | | | | some data. | | | | | | For example: | | | | | | The required | | | | | | attribute | | | | | | indicates | | | | | | that the | | | | | | input field | | | | | | must be | | | | | | completed | | | | | | before | | | | | | submitting | | | | | | the form. It | | | | | | can be set | | | | | | to either | | | | | | true or | | | | | | false. For | | | | | | example: The | | | | | | disabled | | | | | | attribute | | | | | | specifies | | | | | | that the | | | | | | input | | | | | | element | | | | | | should be | | | | | | disabled, | | | | | | meaning it | | | | | | cannot be | | | | | | edited or | | | | | | clicked. It | | | | | | can be set | | | | | | to either | | | | | | true or | | | | | | false. For | | | | | | example: The | | | | | | readonly | | | | | | attribute | | | | | | specifies | | | | | | that the | | | | | | input | | | | | | element | | | | | | should be | | | | | | read-only, | | | | | | meaning it | | | | | | cannot be | | | | | | edited but | | | | | | can be | | | | | | clicked or | | | | | | copied. It | | | | | | can be set | | | | | | to either | | | | | | true or | | | | | | false. For | | | | | | example: The | | | | | | checked | | | | | | attribute | | | | | | designates | | | | | | that the | | | | | | input | | | | | | element | | | | | | should be | | | | | | pre-selected | | | | | | or checked | | | | | | when the | | | | | | page loads. | | | | | | This | | | | | | attribute is | | | | | | only | | | | | | applicable | | | | | | to radio | | | | | | buttons and | | | | | | checkboxes. | | | | | | It can be | | | | | | set to | | | | | | either true | | | | | | or false. | | | | | | For example: | | | | | | The id | | | | | | attribute | | | | | | provides a | | | | | | unique | | | | | | identifier | | | | | | for the | | | | | | input | | | | | | element. It | | | | | | is used to | | | | | | associate | | | | | | the input | | | | | | element with | | | | | | a element, | | | | | | which | | | | | | describes | | | | | | the input. | | | | | | For example: | | | | | | and First | | | | | | name: 39 The | | | | | | class | | | | | | attribute | | | | | | specifies | | | | | | one or more | | | | | | class names | | | | | | for the | | | | | | input | | | | | | element. It | | | | | | is used to | | | | | | apply CSS | | | | | | styling to | | | | | | the input | | | | | | element. For | | | | | | example: | | | | | | Here is an | | | | | | example of a | | | | | | simple HTML | | | | | | form that | | | | | | asks the | | | | | | user to | | | | | | enter their | | | | | | name and | | | | | | email | | | | | | address: | | | | | | | | | | | | Top of Form | | | | | | | | | | | | Name:\ | | | | | | Email: | | | | | | | | | | | | Bottom of | | | | | | Form | | | | | | | | | | | | DEFINITION | | | | | | OF INPUT | | | | | | TAGS: An | | | | | | input tag in | | | | | | HTML is an | | | | | | element type | | | | | | that | | | | | | facilitates | | | | | | user data | | | | | | input in a | | | | | | web form. It | | | | | | is utilized | | | | | | to create | | | | | | interactive | | | | | | controls for | | | | | | web-based | | | | | | forms, | | | | | | enabling | | | | | | users to | | | | | | provide | | | | | | data. The | | | | | | input tag | | | | | | contains a | | | | | | type | | | | | | attribute, | | | | | | which | | | | | | determines | | | | | | the display | | | | | | format and | | | | | | data type | | | | | | that the | | | | | | input | | | | | | element can | | | | | | accommodate. | | | | | | For | | | | | | instance, | | | | | | the | | | | | | following | | | | | | code snippet | | | | | | will | | | | | | generate a | | | | | | text field | | | | | | for users to | | | | | | enter their | | | | | | name:. | | | | | | There exist | | | | | | various | | | | | | types of | | | | | | input | | | | | | elements, | | | | | | including | | | | | | text, | | | | | | button, | | | | | | checkbox, | | | | | | radio, file, | | | | | | among | | | | | | others. Each | | | | | | type | | | | | | possesses | | | | | | its own | | | | | | syntax, | | | | | | attributes, | | | | | | and | | | | | | behavior. | | | | | | The | | | | | | following | | | | | | are examples | | | | | | of input | | | | | | tags namely: | | | | | | Text: A text | | | | | | field in | | | | | | HTML is an | | | | | | input | | | | | | element that | | | | | | facilitates | | | | | | the input of | | | | | | textual data | | | | | | by the user. | | | | | | It is | | | | | | described by | | | | | | the tag and | | | | | | encompasses | | | | | | several | | | | | | attributes | | | | | | that afford | | | | | | customizatio | | | | | | n | | | | | | of its | | | | | | visual | | | | | | presentation | | | | | | and | | | | | | operational | | | | | | characterist | | | | | | ics. | | | | | | These | | | | | | attributes | | | | | | include id, | | | | | | name, value, | | | | | | placeholder, | | | | | | size, | | | | | | maxlength, | | | | | | readonly, | | | | | | and | | | | | | disabled, | | | | | | which | | | | | | respectively | | | | | | serve to | | | | | | specify the | | | | | | identifier, | | | | | | name, | | | | | | default | | | | | | value, | | | | | | instructiona | | | | | | l | | | | | | placeholder, | | | | | | dimensions, | | | | | | maximum | | | | | | length, | | | | | | read-only | | | | | | state, and | | | | | | disabled | | | | | | state of the | | | | | | text field. | | | | | | A text field | | | | | | is different | | | | | | from a text | | | | | | area, which | | | | | | is another | | | | | | input | | | | | | element that | | | | | | allows the | | | | | | user to | | | | | | enter | | | | | | multiple | | | | | | lines of | | | | | | text. | | | | | | | | | | | | Bottom of | | | | | | Form | | | | | | | | | | | | Bottom of | | | | | | Form | | | | | | | | | | | | Bottom of | | | | | | Form | | | | | | | | | | | | Bottom of | | | | | | Form | | | | | | | | | | | | Bottom of | | | | | | Form | | | | +--------------+--------------+ | +-----------------------------------+-----------------------------------+