LEARNING HTML, CSS, AND PYTHON.

1. HTML has opening and closing tag with content in between.

<openingTag>content</closingTag>

 <h1>content</h1> element is used for writing main headings in webpages

<h1></h1> through to <h6></h6> are used for hierarchical

importance of headlines.
We only use 1 h1 per page. For other headings, we can use numbers
through to h6

 P element is used to create paragraphs in websites.

<p> Enter text in the form of a paragraph</p>

 <! - -Enter a comment on your website that will not affect the display and
only be visible to you-->
Use <!- - and -- > to enter such text.

 Use the <main>ALL IMPORTANT TEXT OF DOCUMENT</main> to represent

the content of your document. It includes your h1 and p elements.
ALL THESE ELEMENTS, H, AND P FORM THE NESTED ELEMENTS. Entering these
inside the main element is called nesting.
Your nested elements should be 2 spaces to the right of your main command in
orientation. This is called INDENTATION.
Must follow this format.
 Add images using the <img> it has no closing tag because it’s a SELF-
CLOSING TAG.

ATTRIBUTES – these are spl words used inside the opening tag of an element
to control its behavior. E.g. using
<img src=”url”> specifies the location of the image. Where to pick it from
to use in the document.
 Using alt attributes adds a description of the image you entered in case it
fails to load and increases accessibility. <img src=”photo.jpeg” alt”photo
of xyz.”

 <a href=url>link to xyz or click here to go to xyz</a> anchor element is used

to link another page to your document.

 To turn any text in your paragraph to a link use anchor. It can be used inside
<p>text<a href=”link”></a></p>

In the example above, the word TEXT will be a link.

Use attribute called target to open the link in a specified place.
Target=”_blank”for new tab to open link

Eg <a href=”url” target=”_blank”>text</a>

To turn an image into a link use <a> element and its href attribute

Eg. <a href=”url to site you want to go to ”><img src=”link for image
location” alt=”text describing image ”></a>

 Use
<section>
<h2>title</h2>
<p>text</p>
</section>
to define sections like chapters etc. Nesting all these elements in a new
section helps with SEO.

 Add <ul>
<li>text1</li>
<li>text2</li>
</ul> to create an unordered list.
 <figure>
<img src=”url”alt=”text”>
<figcaption>CAPTION FOR THE FIGURE</figcaption>
</figure>
represents self-contained content and lets you associate images with its
captions.

 Use <em>
</em>
to make text italic

 Use <ol>
<li> element1 </li>
<li> element2 </li>
</ol>
to make ordered lists with numbered elements.

 Use <strong>
</strong>
To make text bold

 Use <form>
</form>
To make a form to collect data.

Use attribute action to tell the browser where form data will be sent.

 Use <input> to collect data in many ways. It’s a VOID ELEMENT. Doesn’t
need closing tags. INLINE ELEMENT. Doesn’t appear on new lines.
Use attribute type to create inputs. E.g. Reset button, password field,
text field etc.
Use attribute name to enter names.
Use attribute placeholder to tell people what to enter in your form’s
field.
 Use attribute required to make sure user can not exit form without
entering data. No need to add value to this attribute

 Use <button>TEXT</button> to create a clickable button

Use attribute type=” submit” to make clear that the button u entered
is a submit button
If you make a submit button it submits your form to the link specified in the
action attribute. INLINE ELEMENT.

Use attribute type=” radio” to make option for a clickable button.

both of these are made with type=”radio”. Id=”indoor” and “outdoor”

is used so these buttons can stand for those values and label text is
used so that the intrinsic value of these buttons displays on interface.

Use attribute name=”indoor-outdoor” to classify the type of data

that youre entering. Lets say you enter 4 5 options with different
types of meals like breakfast lunch and dinner and snacks. Toh
attribute name=”meal” use hoga.

 Use <label>
</label>
to add caption for an element.

Use attribute id to assign an identifier to the <form> element. Ki jis cheez ko

tum enter karrahe ho wo website ko samjhana hai hi kya hai. Lets say
you enter an option named loving toh input me id enter karo loving
taki document me establish hojaye what that input means. It
identifies html elements and they have unique values which don’t
match the other id values.

IN MULTIPLE ATTRIBUTES, ORDER DOESN’T MATTER.

Form data for a button is based on name and value attributes

 Use value attribute to specify value of input element, in our case
button. Add same value as id to these to increase convenience nahi
toh name attribute ka data hi aega which is not useful in case of
multiple buttons. OPTIONAL HOTA HAI but increases convenience toh
daldo. Kuch unique value na ho add karne ko toh id attribute ki value
copy hi kardo.

 Use <fieldset>
</fieldset>
To group related inputs and labels in a form. BLOCK LEVEL ELEMENTS.
Appear on a new line.

Agar 3-4 lambe lambe input and labels hai toh unhe ek fieldset me daldo
taki wo clearly distinguish ho jaye

 Use <legend>
</legend>
To enter a caption for your fieldset

Use attribute type=”checkbox” to choose multiple options. To

add text to checkbox, close your input element and then enter
text

Use attribute <label for=”text”> in a checkbox to make the text

clickable and not just the box.

Use attribute checked in any input element of a form to tick it

by default. No need to enter any value, just add it to element.

 Add footer element to your document after <main></main> to enter small

text. Usually includes author information, copyright data, TnC, contact
information, etc.
 Add header element to contain metadata about title, link to stylesheets and
scripts. METADATA IS INFO THAT ISNT DIRECTLY DISPLAYED ON THE PAGE.
 Title element to show what browser shows as document header. Does not
display on page but is useful for search engines and how it gets displayed.
 The html element is the 1st and last element of a document. Add attribute
Lang=”en” or other language to specify a documents language.

 Add <!DOCTYPE html> as the first element. It’s a special string element
which is a declaration of the latest type of html being used in our document
to meet industry wide specifications.

 Inside head element nest a META element. VOID ELEMENT.

Use attribute named charset=”utf-8” which tells browser how to

encode characters for the page

CSS BASICS
Cascading style sheets is a language used to style html documents. It describes
how html elements should be displayed on a screen.