Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--
- This declares the document type to be html, optional but recommended -->
- <html>
- <!--
- Root tag of an HTML page, the entire html code and other html tags come here -->
- <head>
- <!--
- Head tag, we declare title tag, link tag and other tags here. There are many more tags inside head tag described here, http://www.w3schools.com/tags/tag_head.asp -->
- <title>Login Page</title>
- <!-- Title of the page -->
- <link rel="stylesheet" type="text/css" href="a.css">
- <!--
- This is the link to CSS file, which contains the styling for this html page. We can also put the entire CSS code inside a special HTML tag known as style tag. Type "style" and press TAB to get complete tag [opening and closing tag] with attributes. For eg.
- <style type="text/css">
- .main
- {
- /* properties for main div */
- }
- .anotherDiv
- {
- /* properties */
- }
- </style>
- We can link any no. of css files with a single HTML page. They are downloaded when a website is loaded, from top to bottom. So if you declare some properties for a particular element (div/span/input/etc) in two CSS files, the properties of the CSS file appearing lower in sequence override any similar property of a file apearing upper in a sequence
- -->
- <link href='http://fonts.googleapis.com/css?family=Open+Sans'>
- <!--
- This line of code is used to include a "web font", which is nothing but a normal font refered from another website (google's website, here). This is similar to including a header file in C or including a package in Java, i.e. we will be 'using' this Font in CSS file
- -->
- </head>
- <body>
- <!--
- This tag contains those elements which are displayed on screen.
- Notice the structure of HTML form carefully
- -->
- <div class="main">
- <!--
- "main" div. Holds the entire form and "Sign In" text
- -->
- <div class="upperPane">
- <img class="lockIcon"src="http://i62.tinypic.com/2j1pqmc.png">
- <!-- "img" tag is used to include an image/icon in a HTML webpage. Here we either enter the path of image (For eg. lock.png) or we write the complete URL (if image is available online, like here the image was uploaded on tinypic) -->
- <span class="signin">Sign In</span>
- <!--A simple piece of text, but put inside span to style it
- -->
- </div>
- <!-- End of upper pane, main form starts now -->
- <form class="lowerPane">
- <div class="email">E-mail address</div>
- <!-- Another piece of text -->
- <input type="text" class="textbox" placeholder="mail@address.com">
- <!-- Input type with 3 attributes, explained in GeekWeek sessions -->
- <div class="pass">Password</div>
- <input type="password" class="textbox" placeholder="•••••••••••">
- <!--
- Dont panic, 8226 is just hashcode for "bullet" and hashcode in text is prefixed by "&#" to differentiate it from normal text.We did this because, by default we have '*' in password field, and we had to made it "bullet". You can google hashcodes for popular special characters like Copyright, etc-->
- <input type="button" value="Sign In" class="submit">
- <!-- Simple button -->
- </form>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
