Scribd
Upload
3 views30 pages

Introduction To Web Development Journal

The document outlines practical exercises for web development, focusing on HTML fundamentals, CSS styling, and form creation. It includes aims for each practical, such as creating HTML structures, applying CSS techniques, and designing navigation bars. Each section provides code examples and expected outputs for hands-on learning.

Uploaded by

Afreen Shah
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 views30 pages

Introduction To Web Development Journal

The document outlines practical exercises for web development, focusing on HTML fundamentals, CSS styling, and form creation. It includes aims for each practical, such as creating HTML structures, applying CSS techniques, and designing navigation bars. Each section provides code examples and expected outputs for hands-on learning.

Uploaded by

Afreen Shah
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

INTRODUCTION TO WEB DEVELOPMENT JOURNAL

PRACTICAL NO – 1
AIM: HTML Fundamentals and Page Content
a. HTML5 Page Structure:
<!DOCTYPE html>, <html>, <head>, <body> Page title, headings, paragraphs
CODE:

OUTPUT:
b. Text Formatting and Content Elements:
Line break <br>, horizontal rule <hr>
Formatting tags: <b>, <i>, <u>, <sub>, <sup>, <strike>
CODE:
OUTPUT:
c. i. Media, Images, and Lists Image using <img>
ii. Ordered, unordered, and definition lists
iii. Audio <audio controls> and video <video controls>
CODE:
OUTPUT:
d. Hyperlinks and Embedded Media Internal and external links using YouTube
video embedding using <iframe>
CODE:
i. [Link]
ii. [Link]

OUTPUT:
PRACTICAL NO – 2
AIM: CSS Styling and Page Layout Design
a. Types of CSS Inline CSS, Internal CSS using <style> and External CSS using <link>
CODE:
i. Inline CSS:

ii. Internal CSS:


iii. External CSS:

[Link]

OUTPUT:
Inline CSS
Internal CSS

External CSS
b. CSS Box Model Content, padding, border, margin
CODE:

OUTPUT:
c. Page Layout Techniques Flexbox for horizontal and vertical alignment CSS Grid for
two-column layout
CODE:
i. Flexbox for horizontal and vertical

ii. CSS Grid for two-column layout


OUTPUT:
d. Styling Properties Fonts, colors Alignment and spacing
CODE:
OUTPUT:
PRACTICAL NO – 3
AIM: Create and Style HTML Tables
a. Design a table using <table>, <tr>, <td>, and <th>.
CODE:

OUTPUT:
b. Demonstrate merging cells using rowspan and colspan.
CODE:

OUTPUT:
c. Style the table using CSS for borders, spacing, and alignment.
CODE:
OUTPUT:
PRACTICAL NO – 4
AIM: HTML Forms
a) Create a user input form using <form> and input types such as text, radio, checkbox,
and submit.

b) CODE:

OUTPUT:
b. Add placeholders, labels, and required fields.
CODE:
OUTPUT:
PRACTICAL NO – 5
AIM: Navigation Bar with Dropdown Menus
a. Create a horizontal navigation bar with dropdown menus using HTML and CSS.
CODE:
OUTPUT:
b. Style a vertical navigation bar with dropdowns using hover effects.
CODE:
OUTPUT:

You might also like