hey guys!
Am web designer it means I create templates websites just the design I create the static websites and I know 5 languages of programmation.
My languages are : Html5, Css3, JavaScript, jQuery, Sass , and I want to give you my experience I want to teach you and give you some examples and do other courses this is the number 01.
Today I will show you how to create simple login page with html5 and css3 and I will explain to you what's all the tags that I will use , Firstly this is what we will do :
You will say it's simple but am doing this post for the beginners , I will do some professionnel things if I find reactions .
let's go ..
firstly you need text editor , am using ' brackets' if you have any other text editor you can follow me if you want to download 'brackets' this is the link :
just click download, this is the last version , now we can start
so we will open our text editor and type this informations like this picture:
click 'file' then 'new' and write this tags :
<!document html> : this tags means that we will use the version 5 of html , each language has a version and this code mean that we will use the last version because it has many new options and it's compatible with the new browsers ..In html we have the open tag like it < element> and the end tag between them we write our sentence and we have some tags has just open tag like < meta /> and it has many attributes .
we have also < html> the open and the end tag it mean that we will use html document when you open this page the browser know by this tag that you will use an html document .
we find two childrens the first is < head> and the second is < body> , all informations we will write in < head> will not appear in the page they will appear in the top of the browser and in the search to this website, all informations we will write in < body> will appear .
i have wrote < title>first course this code means that the title of my page or website will be first course , this title will appear in the tab of browser .
< link rel=stylesheet href='style.css' /> : this code means that I will import other page called style and the extension is .css , <link it means I will import the relation between my page and what I will import is ' stylesheet ' type of relations and the 'href' is 'hyper reference ' where is my page in the same folder and called style.css .
this page will have my code css that will format my html page .
< div class='login-form'>.... : the div is like container we will reserve a place full width it means will take the full width of screen because it's a block element and we will do some formats to be beautiful , we put a class if we have many ' div ' we can choose our ' div ' by this class .
< h1>... : Is heading it's the title of this page or container ' div ' .
< form methode='post' action=''>..... : is the container of our inputs , methods = post / get if you choose post so you will transfer this informations to another page 'php' example if you choose get you will show this informations in the same page html.
the img : it's the tag of image 'src' : means source where we can find this image and 'alt' means if we can't find this image will show what wrote in 'alt' .
the label: like title of my input.
< input type="text" placeholder="type your username" /> : input it's clear the type we have many types like ' text , password , email ..etc ' and ' placeholder ' is the writing in the input when we check the input this writing will hide.
< button type="submit">...: is the button an the type we have 3 types : submit button and reset , submit to send button to do some functions and reset to reset the values of inputs example.
now click ' file' then 'save as ' enter the name 'index.html' to save this file as html document .
this is the result of this code ..
Now we need Css to do some formats to our page , open new page 'file' then 'new' after that ' save as ' do ' style.css' , now you re in this page.
.login-form : we have class called 'login-form' to choose class in 'CSS' you must put ' . ' point after the point the name of class and put the ' { here the code }' .
I want my login page in the center of my website so I chose ' text-aligne' : center ;
'border:2px solid #096953' : means I want border the bold 2px solid means not dashed and I chose the color in the end.
'background-color:#157761' means the color of background is #color.
'width=300px' I want to give this container 300 px width because it has the full width so we will give it width exactly to be small
'border-raduis:20px' to rotate the container 20px it has many values to rotate the right or left top or bottom I gave for all .
'margin' External margins I gave auto to center this container to be the same width in the right and the left.
padding for the internal margins because the title and the inputs will appear attached to the container .
this is the result :
now I will continue to give formats for the others elements ..
we continue with .login-form h1 to select the heading element and I chose the white color #fff , background-color and border:none means I wont border around this element , border-radius and padding , font-size is the size of the font : 20px .
I select after that the image and I gave it width and height to be a little small and margin-right to go further 10px to the right
and the label or the title of input I chose color white #fff and font size , margin-top negative value to go to the top.
the input I gave it display:block there are 4 types of element the block who take the full width ' inline ' take just the place where it 'flex' to be flex and you chose the position and the 'inline-block' to take the options between block and inline
to be each input in place and take the full width we chose display:block.
margin and padding ..etc the same proprieties .
we will continue to the button :
I gave it the same proprieties width background-color padding margin and font-family :tahoma , I chose this type of font you can write any type of fonts you have .
I wish that you have understood me and this page had simple and easy to do , if you like my post please upvote and follow me @aymenz , when I find reactions I will explain the Html language and the Css I will also give you some examples with video but I want your encouragement
thank's for your attentions!
thank's sir really I thank you because I want to be web designer and I can't find examples like it thank you