Programming Diaries


Kanal geosi va tili: ko‘rsatilmagan, ko‘rsatilmagan


Welcome to programming Diaries. To find different articles, resources, blogs, questions, tutorials, books and many more about various programming languages. Contact @jamesScript for info @diaryOfaProgrammerGroup for discussion

Связанные каналы

Kanal geosi va tili
ko‘rsatilmagan, ko‘rsatilmagan
Statistika
Postlar filtri


All those methods to give these output in the browser.


Using a single file and putting all the style codes in there.
Remember to put both the html and css file at the same directory.


Using inline method,


Using a style tag


To use CSS in HTML there are three methods
1. Creating a file with a .css extension and linking it with the HTML using the link tag.(The most professional way).
2. using a style tag and putting all the styles in there
3. using inline method, adding the CSS directly to the element.


#CSS
What is CSS?
CSS stands for cascading style sheets. It describes how HTML elements are to be displayed on screen. It takes the class, id and HTML tags to style them.


Visual studio code text editor latest version




#HTML Class and Id
These are the most important things in HTML since they help select elements in different things. either to style the html using css or make the page dynamic using javascript the elements have to be selected and this is where the class and id attributes comes in handy.
Both class and id are used to give the elements in html a specific name which can be used in other languages later. The difference between them is classes can be used many times. while id names are different with every html element. you cant use the same id name that you used in the previous lines of code.

Paris
Paris is the capital of France

Here we used the class name two times and that is okay. But with id the names have to be different just like

Paris
Paris is the capital of France


#Images
To display images on a website as a background. CSS comes in handy. But just to display an image you use an img tag on HTML. If the HTML file and the image are in the same directory. all u have to do is just state the image's name with its extension in the src attribute inside the img tag.

this code will definitely display the image if the images's name is "car.jpg" and if it is the same directory as the html file.


And the last thing on form is buttons. Button can be made with a different types of way. There is a button tag that is mainly used. But You could also use CSS or Bootstrap to edit any link or text into a button.
Click Me
You can also add an attribute of the type
Submit


One more thing. you can use a "placeholder" attribute to make it look like more realistic.




We use a select tag. and inside that an options tag which we want to display as a dropdown. In this case it is the Gender.

And a textarea tag alone without any elements can be used as an input.

And the output on the browser is this 👇


A little tip left out from yesterdays article. We can also add a textarea and a dropdown option on the form. A whole HTML form code with the output will look like this.




index2.html
593bayt
A code for the form and "a" tag in use




Here the div tags are used to display the elements in different lines and the br tag to give an extra empty line. To make it look like 👇


image_2020-11-13_14-57-07.png
2.2Kb
This is what the output of the code will look like when the data is entered. They are all in the same line because. inputs and labels are inline Elements. we would have to wrap them inside a block level element like a div. to display them on their own line.

20 ta oxirgi post ko‘rsatilgan.

211

obunachilar
Kanal statistikasi