Scribd
Upload
3 views4 pages

Web App Development: HTML & CSS Guide

The document provides detailed notes on web application development, focusing on HTML markup for text, tables, forms, and CSS. It covers various elements such as lists, content elements, inline elements, links, images, table structure, forms, and CSS formatting. Key concepts include the use of block and inline elements, accessibility features for forms, and the CSS box model.

Uploaded by

cmptup2020
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views4 pages

Web App Development: HTML & CSS Guide

The document provides detailed notes on web application development, focusing on HTML markup for text, tables, forms, and CSS. It covers various elements such as lists, content elements, inline elements, links, images, table structure, forms, and CSS formatting. Key concepts include the use of block and inline elements, accessibility features for forms, and the CSS box model.

Uploaded by

cmptup2020
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

24CTU4CB – WEB APPLICATION DEVELOPMENT

DETAILED NOTES – MARKING UP TEXT, TABLES, FORMS, CSS

1. MARKING UP TEXT

Marking up text means defining structure and meaning using HTML.

1.1 Lists

1.1.1 Ordered List (<ol>)

An ordered list displays items in numbered sequence.

Example:

<ol type="I" start="3">

<li>Introduction to HTML</li>

<li>CSS Styling</li>

<li>JavaScript Basics</li>

</ol>

1.1.2 Unordered List (<ul>)

Displays bullet points.

Example:

<ul style="list-style-type: square;">

<li>Apple</li>

<li>Mango</li>

<li>Orange</li>
</ul>

1.1.3 Definition List (<dl>)

Used for glossary.

Example:

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language</dd>

</dl>

2. CONTENT ELEMENTS

Paragraph (<p>), Headings (<h1>–<h6>), Strong (<strong>), Emphasis (<em>), Blockquote


(<blockquote>), Code (<code>)

Example:

<p>Web development involves HTML, CSS, and JavaScript.</p>

3. INLINE ELEMENTS

Inline elements appear within a line (span, strong, a, img, code).

4. DIV AND SPAN

<div> is block-level, <span> is inline.

Example:

<div style="background:#e0f0ff;">This is a div block.</div>

<span style="color:red;">highlighted</span>
5. ADDING LINKS

<a href="[Link] Google</a>

<a href="[Link] Email</a>

6. ADDING IMAGES

<img src="[Link]" alt="Rose Flower" width="300">

7. TABLE MARKUP

Table structure: <table>, <tr>, <th>, <td>

Example:

<table border="1">

<tr><th>Name</th><th>Mark</th></tr>

<tr><td>Ravi</td><td>85</td></tr>

</table>

Spanning:

<td colspan="2">Merged</td>

<td rowspan="2">Merged</td>

8. FORMS

Form structure:

<form action="[Link]" method="post"></form>

Form elements:
Text: <input type="text">

Password: <input type="password">

Email: <input type="email">

Radio, Checkbox, Select, Textarea, Buttons

Accessibility:

<label>, <fieldset>, <legend>, placeholder, required

9. CSS FORMATTING

Types: Inline, Internal, External

Example:

p { color: blue; font-size:18px; }

Box Model:

margin, border, padding, content

Background, Borders, List styling.

You might also like