HTML Practice


What is HTML
  • HTML stands for  “Hyper Text Markup Language”.
  • HTML is a scripting language.
  • HTML is client side language (front end). 

Why HTML

  • HTML is used to create web pages.
  • It provides a specific structure to our document (we can create how we require).
  • To create web page for Libraries,Ticket bookings etc we can use HTML.
  • It can be viewed by anyone  regardless of what kind of browser we use.
  • We don’t need any special kind of software to create HTML page.
  • Presently we are using HTML5.
  • HTML pages are of two types.  
                1) Static                   
                2) Dynamic

  Static pages : Which don’t require any interaction with the page.
           Eg :text and images

   Dynamic pages : Which require interaction with the page.
           Eg :If we want to find square of a number taking input from user.

Advantages of HTML
> Every browser supports HTML language.
>  Easy to learn and use.
>  By default it is in every windows. So need not to buy an extra software.
>  Widely used. Most of the web pages developed using HTML.
> We can integrate html with java script,css,PHP etc.

Disadvantages of HTML
>  If we need long code to create a web page it produces some complexity.
>  Security features offered by HTML are limited.
>  For making simple web page also we need to write long code.
>  If we Want to use dynamic page then it alone not useful.
>  Following programming languages can be used with HTML 
         Java
       Java script
       PHP
       ASP.NET
       VB script
HTML tags
  • HTML tags are hidden keywords in the web pages.
  • The tags contains how our content could format and  display in the browser.
  • These are used to mark up start and end of the HTML element.
  • Start tag consists of left angular bracket followed by element and its attributes and right angular bracket.
           Eg: <p>
                 <img src=””>
  • End tag contains opening bracket followed by element name forward slash and closing bracket.
           Eg: </p>

Program to print helloworld using ,
I.  Notepad     
II. Notepad++       
III.Editplus


I.  Notepad   

output:


II. Notepad++  
output:



III.Editplus


Output:


  • In notepad we need to type all the tags (all the content along with the tags). 
  • In notepad++ it showing some suggestions for tag which we want to type.
  • In editplus we need to write only body in the body tag. It already contains html,head and body tags.

                                H1 to H6 tags


Output


  • The size of the content in the tag is decreasing from h1 to h6



P tag





It gives some space before and after the paragraph.



Different tags:


Output:


  • B and strong , i and em  are look like same as physical. But strong,em are used for important text in the document where as bold and italic is used just highlighting the keywords. 
  • How you want the important  text to be highlighted in bold(use strong) or italic(use em).  
 

Tag name
Use
Mark
highlight the part of text
Del
delete or cut that particular text.
Ins
text is inserted in to the document.
Sub
Subscript
Sup
Superscript
Small
change the size of text to small




 Body tag
Tag name
Attributes
Use
Body
Bgcolor
It is used for background color of document
Background
To put background image for our document(by giving url of image).
Text
The text color of document.
Link
Color of link in the document.
Alink
Color of activated link in the document.
Vlink
Color of visited link in the document.
Top margin
Used to set a margin above the body.
Left margin
Used to  set a margin left to the body.

style
Media
Used to sets the media the style is applied to.
Eg:printing.
(while printing the styles  follows)








Anchor tag
Tag name
attributes
Use
a
Href
Specifies the location of
linked  document.
Target
Where to open the linked document.
Eg: self,blank
Title
The title of the link which appears user as a tool tip.


  • I have given the target of the document self. So it opens the document in the current screen only   
                            

Image tag
Tag name
Attribute
Use
Img
Alt
It displays text in  place of image if image is not loaded.

Width
Indicates Width of the image.

Height
Indicates height of the image.

Src
Specifies the url of an image.

Input tag
Tag name
Attribute
Use
Input
Type
Specifies the type of input.
Eg :text,button,checkbox etc.

Name
Name of the input field.
It must and should if

Value
Default selection for an input element.

Size
Specifies the width of the input in characters.

Max
length
Maximum number of characters that can be enter in to input field.
Button

It is used to create the button.


Iframe tag
  • Iframe is used to put another document in the current document.
(already-existing HTML document into the current document)

Tag name
Attribute
Use
Iframe
Src
Specifies the url address of the document.

Name
Name of the i frame.

Width
Specifies width of iframe.

Height
Specifies height of an iframe.

Usemap
>  Usemap is an image attribute.
>  A client side image map could be used with image.
> An image map is a User Interface technique in which a user can click anywhere inside of > An image, and the location of the click affects the outcome of the click.


Example 1
Take India map. Inside it there is states. So in that by clicking the particular state it will    open that particular state map.






                      

Example 2




Output


While clicking a particular image that image will be opened in that window.
Eg: While clicking on the sun the following image will be opened.




Login page and validation of email




output:
Table tag

Example 1 








Example 2

Output:


 Login form

Output:




Registration form


Output:


Registration form


Output:



Frames


frame1.html


frame2.html


frame3.html

frame4.html


Output:




Website creation



Output:






Web page creation
html:


Css:

Output:








Modified code:
Html :



Css :


Output:








Serif vs Sans Serif


Serif fonts
Sans serif fonts
Strokes on the end of letter
yes
No
Font families
Times New Roman,Georgia,Merriweather.
Arial,verdana,Roboto .
Examples
Hello  (Times New Roman),
Hello  (Georgia).
Hello (Arial),
Hello (Verdana).


Usage
Large prints like books,magazines,
newspaper articles.
Small prints like newspaper headlines.



Bauhaus movement
Post World War I Germany set the stage for the most organized art movement in art history. The Bauhaus movement was a reaction to the social changes the Germans were facing. The country had been crushed in the war. Their economy was collapsing. Mobs of unemployed people roamed the street waiting for the country to collapse. The Germans were living in poverty and starving from the lack of supplies (Jackson). "This may seem to be an unlikely environment to support an artistic revolution. Nevertheless, for the designers of the Bauhaus, this was the beginning of a rewarding struggle".

In 1919 the Bauhaus was formed in Weimar, Germany . Walter Gropius was appointed as the head of the school.

It was founded with the idea of creating a "total" work of art in which all arts, including architecture, would eventually be brought together. The Bauhaus style later became one of the most influential currents in modern design, Modernist architecture and art, design and architectural education. Modernism, the English Arts and Crafts movement and Constructivism had a huge impact of the opening of Bauhaus.

The movement encouraged teachers and students to pursue their crafts together in design studios and workshops. The school moved to Dessau in 1925 and then to Berlin in 1932, after which Bauhaus under constant harassment by the Nazis finally closed.

The Bauhaus closed in 1932 because the Bauhaus artists not followed the traditional German values.














Comments

Post a Comment