Core HTML Fundamentals for Java Web Projects
Tag Syntax and Document Layout
HTML (Hypertext Markup Language) defines the structure of a webpage. It supports multimedia such as images, audio, and video beyond plain text. The language consists of tags, and browsers parse these tags to render content. The syntax is flexible; tags are case-insensitive, attribute values can use single or double quotes, and nesting rules are not strictly enforced. A minimal document skeleton looks like this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
</head>
<body>
Content visible to users goes here.
</body>
</html>
Most editors generate this structure with an exclamation mark followed by a Tab or Enter keystroke. The <head> section holds metadata, CSS links, and the <title> element, while the <body> contains the displayed page content.
Text Structuring Elemetns
Headings range from <h1> to <h6>. They display bold, progressively smaller text and occupy their own line. An <h1> tag should ideally appear once per page. Paragraphs use the <p> tag, introducing vertical gaps between blocks.
Two equivalent approaches create bold text: <strong> and <b>. For line breaks and horizontal dividers, employ the self-closing <br> and <hr> tags. To preserve multiple spaces in rendered output, insert the entity.
<h1>Primary Heading</h1>
<p>A paragraph of content. Extra spaces collapse unless you use entities.</p>
<strong>Important</strong> and <b>equally bold</b>.
Media and Linking
Pictures are embedded via ![]() with a required src attribute. Dimensions can be specified as pixel values or percentages relative to the parent element:
Hyperlinks employ the <a> tag. The href attribute sets the destination; set it to # during early development. The target attribute determines whether the link opens in the same tab (_self) or a new tab (_blank). Underlines are removed by applying the CSS text-decoration: none; property. Additional text-decoration values include underline, overline, line-through, blink, and inherit.
<a href="https://example.com" target="_blank">Visit Example</a>
Audio and video elements can be sized using width and height attributes. The layout containers <div> (block-level) and <span> (inline) help group and style sections.
Tables and Cell Merging
Tables are built with | , and data cells with |. Borders appear when the border attribute is set on the table. For clarity, structural tags ` | |---|---| | Student | Score | Grade | | Alice | 89 | A | | Bob | 92 |
## Forms and Input Controls
Forms collect user data through `<form>`. Two critical attributes are `action` (the server URL) and `method` (HTTP submission type). The `GET` method appends parameters to the URL and has length limitations; `POST` transmits data inside the request body with no size cap.
Various input types are defined through the `type` attribute of the `<input>` tag:
- **Text fields**: `<input type="text" name="username" placeholder="Enter name">`
- **Password fields**: Mask user entry.
- **Radio buttons**: Group them by sharing the same `name` attribute. The `value` attribute identifies the selection on submission. Wrapping with `<label>` makes the accompanying text clickable.
- **Checkboxes**: Similar grouping and `value` setup; apply `checked` to preselect options.
- **Dropdowns**: Built with `<select>` and nested `<option>` elements, each carrying a `value`.
- **Text areas**: A multi-line control where `cols` and `rows` define dimensions. A text hint inside the element is common, and resize handles can be disabled via CSS.
- **Buttons**: `<input type="button">`, `<input type="reset">`, and `<input type="submit">` provide generic actions, form clearing, and form submission respectively.
```html
Username:
Gender
Male
Female
Interests:
Reading
Sports
Education:
--Please choose--
Bachelor's
Master's
Bio:
Tell us about yourself
Proper use of name and value attributes ensures that the correct key-value pairs reach the server when the form is processed.
