Scribd
Upload
15 views16 pages

Adobe Scan 16 Jun 2024

Behind this picture I have to go and see the house I think I might be in a little while but I’m going home to take care and get some things done so I’ll see if you want me too but I’m just going home to do my nails so I’ll see what time I love your name and I will be home soon I hope you’re doing well.

Uploaded by

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

Adobe Scan 16 Jun 2024

Behind this picture I have to go and see the house I think I might be in a little while but I’m going home to take care and get some things done so I’ll see if you want me too but I’m just going home to do my nails so I’ll see what time I love your name and I will be home soon I hope you’re doing well.

Uploaded by

Rohan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

HTML: Basic Syntax, Standard

HTML Document Structure,


Basic Text Markup
Basic Syntax
" HTML (HyperText Markup
Language) is the standard language
for creating web pages.
" Tags are the basic building blocks:
<tagname>content</tagname>.

" Example: '<p>This is a


paragraph. </p>
Standard HTML Document Structure

html Copy code

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.,</p>
</body>
</html>
Basic Text Markup
" Headings: '<h1> to '<h6>
Paragraph: `<p>'.
" Bold: <b> or<strong>
" Italic: '<i>`or '<em>
" Line Break: '<br>'.

" Horizontal Rule: '<hr>.

Html Styles, Elements,


Attributes, Heading, Layouts,
Iframes, Images, Hypertext
Links, Lists, Tables,Forms,
Dynamic HTML
Styles
" Inline:<p
style=" color : blue; ">This is a
blue paragraph.,</p>
" Internal:

html Copy code

<head>

<style>
p {color: blue;}
</style>
</head>
" External:

html G Copy code

<head>
<link rel="stylesheet" href=
</head>

Elements & Attributes

" Elements are the building blocks


('<p>).
" Attributes provide additional
information (' <a
href="url">Link</a>).

Headings
'<h1>`to '<h6>`: define headings,
'<h1>' is the highest.
Layouts
" Use of '<div> and <span>

" CSS for layout: `display',


position', flex,'grid'.

Iframes
" Embed another HTML page:
'<iframe src=" page . html">
</iframe>.

Images
<img src="url"
alt="description">

Hypertext Links
'<a href="url">This is a
link</a>.
Lists

Ordered: '<ol> <li>Item</li>


</ol>

Unordered: <ul> <li>Item</li>


</ul>

Tables

" Basic structure:

html Copy code

<table>
<tr>

<th>Heading</th>
<th>Heading</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Forms

" Collect user input:

html Copy code

<form action="submit . php">


<label for="fname ">First nam
<input type="text" id=" fname
<input type="submit" value="!
</form>

Dynamic HTML (DHTML)


" Enhances interactivity with
JavaScript.
Example: changing content/style
dynamically.
CSS: Need for CSs, Introduction
to CSS, Basic Syntax and
Structure, Using CSs,
Background Images, Colors,
and Properties, Manipulating
Texts,Using Fonts, Borders,
Boxes, Margins, Padding, Lists,
Positioningusing CSs, CSS2
Need for CSS

" Separates content from


presentation.

Enhances maintainability and


reusability.
Introduction to Css

Cascading Style Sheets (CSS)


describes how HTML elements are
to be displayed.

Basic Syntax and Structure


" Selector {property: value;}
" Example:

CSS Copy code

body {
background -color: lightblue;
}

Using Css
Inline, internal, and external
methods.
Background Images, Colors, and
Properties
background-color',
`background-image', `color'.

Manipulating Texts
text-align', ' text-decoration',
text-transform'.

Using Fonts
font - family', font-size',
font -weight'.

Borders, Boxes, Margins,Padding


" Border: `border: 1px solid
black;
Margin: space outside the border.

" Padding: space inside the border.


Lists

" Style lists with 'list-style-type',


list-style-position'.

Positioning using Css


'static', `relative', ' absolute',
fixed', 'sticky.

CSS2

" Enhanced capabilities: media types,


improved selectors.

The Box Model

" Describes the rectangular boxes


generated for elements.
Consists of: 'content, padding',
'border',`margin'.
Working with XML: Document
Type Definition (DTD), XML
Schemas,Document Object
Model, Parsers - DOM, and SAX
Document Type Definition (DTD)
" Defines the structure and legal
elements/attributes.
" Example:

Xml O Copy code

<! DOCTYPE note [


<!ELEMENT note (to, from, heading, I
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA) >
<!ELEMENT body (#PCDATA) >
]>
XML Schemas

More powerful than DTD, defines


structure and data types.
Written in XML Schema Definition

(XSD).

Document Object Model (DOM)


Tree structure representing the
document.

Manipulated with JavaScript for


dynamic content.

Parsers - DOM and SAX

DOM Parser: loads the entire XML

document into memory.


SAX Parser: parses XML document
sequentially.
Introduction to XHTML: XML,
Meta Tags, Character Entities,
Frames, and Frame Sets
XML

Extensible Markup Language,


defines rules for encoding
documents.

Meta Tags
" Provide metadata: `<meta
charset="UTE-8">'.

Character Entities

Special characters: `&amp;',


'&lt;, &gt;
Frames and Frame Sets

" Divide the browser window into


multiple sections.
Example:

html Copy code

<frameset cols="25%, 75%">


<frame src="menu.html ">
<frame src=" content.htm.
</frameset>

You might also like