Scribd
Upload
3 views10 pages

HTML Handwritten Style Notes

The document provides a comprehensive guide on HTML, covering its definition, structure, and key features. It includes explanations of basic tags, formatting, lists, links, images, tables, forms, and semantic HTML, along with examples for each topic. Additionally, it highlights HTML5 features and best practices for web development.

Uploaded by

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

HTML Handwritten Style Notes

The document provides a comprehensive guide on HTML, covering its definition, structure, and key features. It includes explanations of basic tags, formatting, lists, links, images, tables, forms, and semantic HTML, along with examples for each topic. Additionally, it highlights HTML5 features and best practices for web development.

Uploaded by

rijabod211
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
yon “Me Basic to Advanced Notes | Complete handwritten notes for beginners to advanced learners What is HTML? HTML (HyperText Markup Language) is the standard markup language used to create and structure web Example (Simple HTML Page) My First Page Welcome to HTML.

HTML Page Structure eg? Oe emi Key Features 1 * Easy 40 learn = = Heading Platform independent SNe ie a 1 Used 4» create web pages = Link % Works with CSS & JavaScript tes Supported by all browsers * Mearing of HTML HTML “Document Structure Basic Tags Headings & Paragraphs Links & Images Lists Tables Forms Semantic HTML HIMLS Tags . Polidddiis ee o SHTML BASIC TAGS < 2Ve HTML tags are the building blocks used to * Heading “Tags eee ee % Line Break Tag Horizontal Line Comment Tag create and structure web pages. * Heading Used te define h2> Sub Heading | headings. - his largest and h6> Smallest Heading | h6 is smallest. This is a paragraph, | Used to. defire foresee ES Used to bresk a line.
Used to create « horizontal line l-- This is a comment --> | Used to add ‘comments, Bold Text Used to bold ‘the text. Ttalie Text Used to italie the text. v Use meaningful headings (hi -> h6). Use
for line break, net for spacing. > Use comments zg 42 explain your code u © Tags are written inside angle brackets “< > Most tags have on opening ad closing tay HTML is not case sensitive, but lovercase is recommended. EXAMPLE OUTPUT Heading Sub Heading This is a paragraph Bold Text Tialic Text EMPTY TAGS (No Closing Tag) Ce) GE sD Ge) These tags do not have closing —Tez]- > TEXT FORMATTING < nr Ole HTML provides several tags to format text and make it more meaningful. “de Example Output Formatting Tags Bold Text Tag Example Output | Use Important Text | ch>Beldc/b> Bold | Bold text Tel ee Emphasized Text stomp] Inportant| Important |Ingortart txt] | Underline Text Italic | Italic text ‘Highlight Text Srall Text Deleted Text Inserted Text | Emphasis | Emphasis | Emphaszed text | Underline “rarkd Goat | mar Hig | HIGRIGRE | High ot Underlined text x! (Superscript) ] Small Text | Seal Text | Dmaler text H,0 (Subscript) Edel» | Deleted | Bebebed | Delite text ins) | insertedc/n> | Inarted [mur toe | - Note es | cl lame < | Hesub>2 instead of for emphasis. + These tags help in This is bold, tate and | | better SEO ard “highlighted tet accessibility. Cy Combination Example This is cboboldé/b>, and highighted text. to # Use formatting tags to improve readability, ! ' Dae oe et fe sag (a oe Sr) ' v o—|] Page 3 {|—* > HTML LISTS < “Oe HTML lists are used to group related items in a specific order or structure. 3K 1. Ordered List (ol) Tkems are displayed in a specific order (numbers).
    <1i Mango <1i>Banana
3 2. Unordered List (ul) tems are displayed with bullets. 3. Description List (dl) ‘ HTML c/at>
Hyper Text Markup Language
C85 cdd> Cascading Style Sheets ¢/dd> “f > Use vihen order is important Use shen order is not important. > Use for terms and explanations x Used to define terms and their descriptions. > Lists can be nested inside each other. 5 Y <— J Page 4 -* © for ordered list © defines list items Lists can be nested. i ' ' ' ' \ ' ' | | ' ! ' J # for description list | ' ' ' ! ! : f { \ ! | Bullet Types: ' | dise (6) - Default i ' | circle () - | 1 aquare (©) -> + Unordered List | Hyper Text Markup Language] | clin: List Item i ea | edl>—: Description List | Cauading Sule Sheds | | : Term + Description i Nested List Exe ip rrate oS Lb hyplec/it> Sbnngecrity gas wie SLotegtattes > ae W > HTML LINKS & IMAGES < “Oe Links are used to connect one page to another. Images are used to add visuals to web pages. K 1, Links ( Anchor Tag ) z Example _ Link Text Visit Example Website Important Attributes © href= "url® Specifies the destination URL z } Shows extra information on hover | title= "Download Notes” | download > / © download > Downloads the linked file Peer ie > Security for target="_blank” | 1 + rel="noopener” 3 2. Images ( Tag) Important Altributes a src Image source oe or path) salt > Alternative text for image Description = = zee width > Sets width of image Example height > Sets height of image co els ocala eran er retrermancs) | JPG / JPEG > Photos \ | enc + mages th tronparey. | | GIF > Animations 1 | sve > Vector Graphics = | if. g % Always use meaningful Link text. | Always add alt text for images (good for SEO & accessibility) i blank” carefully t > HTML TABLES < “Ue HTML tables are used to display data in rows and columns. -* eSyie 2, Example
as KEY POINTS: Header } Table Row Name evlable sta is Header (Headings) Sere arranged in Pea aeabe rows (tr) and columns. (td), Data Table Row Date (Data) Rahul 20 <4d> Delhi © th is used for table headings.
. Neha for tabular data 24 only . Mumbai v 3. Table Tags : sfe> ek t > Defines a table \ > Defines a table row } 4. Example Output > Defines a header cell | Oe Roe ee ee > Defines a data cell | > Defines table caption | Name Ase City > Groups header content | Rahul 20 Dethi > Groups body content | Neha a Mee > Groups footer content | 5. Common Attributes 6 Colspan & Rowspan Reempan argo ewe) % Use tables only for tabular data, not for layout. Use for headings (better for accessibility) # Use to add a title to the table Keep tables simple and easy to read CY v eres © SA oe eas Calspan (Merge Columns) cellpadding > Space inside the call el + callepacing > Space between calls + width > Sats tabla with cep ne se align Alig table (Uf /eatar iit) a ba pee Sea Merged Cell Merged | A | ® cet Jc |p Merged Cell > HTML FORMS < oY e——_—_e HTML forms ore used to collect user input. security, © Add labels for better user experience 1+ Password = Hides the characters | © Email + For email input ‘© Number : For numeric values i ' ' i + Use method="post™ for | i \ i -* 4. Form Structure / 1 |? ection > where to send date | ‘ —> method > get / post i ¥ iar | + form tag i the container 2. Text Inputs | forall form element eS eee S| | i | | | | 3. Radio Buttons & Checkboxes Radio Buttons (Single Chee) HTML input typescheckbox™ value: css input types“checkbon” value=*je"> JavaScript 4. Select Dropdowr css" > CSS | | HTML a i JavaScript 5, Textarea 6. File Input input types" File”> c 1 Oru OReas z (Gene ia) fs hn Bim wes O v 7. Submit & Reset Buttor SEMANTIC HTML < “Ve Semantic HTML uses tags that describe the meaning and purpose of the content. oe 1. Common Semantic Elements 2. Example Structure Te P 2 “cht> My Website Represents intreductory content | oF Home | sus ti motest es Contack | Defines navigation links gee emaino | Represents the main content ae 4 Improves SEO of the document “section? © Beer accesblity About Us | Defines a section in a document We provide quality contet.c/p> || ° Easier to read and maintain Represents independent, Rane « cet | Ror ie i eis ww i

This i an artile.

aes aside | Defines content aside from dendbiet = the main content og ©. Related. Links cliLink Se/ieiLink2e/t> footers | Represents foter content us of section or page

© 2024 My Website

3. Semantic vs Non-Semantic 4, Page Layout Example Non-Semantic Semantic --{[]}---- ee ( “ediv>, | , , i NOTE” ape ee ' { | Use semantic | No meaning about | Clearly describes | tags whenever | content the | sang section? |] {posible instead Lass helpful for SEO. | Better SEO and | of for and ccceslty accessibility i i Hard to understand — | Easy to understand ; i large code and. maintain t ! (Fe Always use only once per page | Keep cheader> and. consistent | Use for thematically grouped content 1 Use for independent content lke blog pots Need ly SHTML5S FEATURES < “Oe HTMLS introduces new elements, attributes and APIs for modern web development Better performance and accessibility y * 4. New HTMLS Elements ite gaia ' | KEY POINTS) © Cheader> © Sarides 16 ih agains nid f * - + 1 areas | © © aa | > Supports vmultenéain wathaat | # + sia | plugins. | * © i$ ee Sees ips Site { I i 2. Multimedia Elements (a) Audio (b) Video endla controle? video width="320" controls> c| | + Visible heading fr detaits | Progress: ET) 70% ee : a | | compatibility I g | Disk Unge: ET} cox ) — Page 9 — HTML ATTRIBUTES < Attributes. provide HTML elements. They are always written in the opening tag. 41. Anatomy of an Attribute 2Oe additional information about. * | Content | Element J J Attribute Value leant hte a oo pa \, ¥, ! Description a digas dente fr am lament |
7 far an alamand P = lags ink” de"top-tink"> ‘Adds ini CSS stan kL atyle="eolors Mues"> See wal, Extra ifomation on hover “ing? | es als Ath, eight ing eee tag pg alt= "Tnage> input | type, nama, val, accor, regued 5 ‘form>_| ection mated, eels “for ction nab php™ mahal p> ‘tabled | herder alpding, elpacing “table berdars"1 cllpacing °0°> 4. Boolean Attributes le thn oat ened Preece of the ttrbale + trv Example © Cnpub types “chectbon” checked © input types"tent” daahled> + caption selected? F + Woe alt in images for accesnty and SEO. |e Use Ue fr blpil elie, © Uae reued in foe be ingrove ater sapere 5. Best Practices Use meaning and clase names $9 Use Learn Gr eta nec 9 Ags ee quae ered, tli. vlan

You might also like