So you want to learn how websites are made?
As a user of the internet you have seen many websites. You may have wondered how websites work. Websites make use of hypertext markup language(HTML) and cascading style sheets(CSS) to display information all across the world.
What is HTML
HTML is the structure of all websites. HTML uses elements and tags to format a website. Tags are kind of like brackets, except that they have more variety. Tags always start with a < and end with a >. In the middle of the tag is the type of the tag. For example: <p>
HTML elements
In code, elements are often pairs of tags that enclose some content. On the browser side, elements group text and graphics together. The two tags are the starting tag and the ending tag. For example: <p> </p>
The starting tag can include attributes which change things about the element or its content. For example:
<p hidden="true" > hello world </p>Would make that <p> hidden, which makes it invisible.
Inline and block elements
Elements can be either inline or block elements. Block elements will start on a new line in the webpage. Block elements will also take up all available width. Inline elements will not start a new line. They will only be as wide as necessary.
How do I change how things look?
HTML alone looks outdated. Nowadays, HTML is paired with CSS to alter and improve the look of your website.
What is CSS?
CSS is made up of rules. CSS rules are used to change the look of specific elements. Rules specify what elements to style using selectors. Selectors select elements based on conditions elements might include. For example, if the selector is p, it will style all elements with the <p> tag. To be more selective, you can put another element selector before the p. This will then select <p> tags that are nested inside of the element you just added. For example:
div p { }
selects any <p> elements that are inside any <div> elements.
After the selector, you can change certain properties of the selected elements to specified values. To change a property, first type the property name, add a colon, then type the value you would like to set that property to, then a semicolon. For example, typing width: 200px; will set the width of the element to 200 pixels.
All properties must be inside a pair of curly brackets after the selector. For example:
p {
width: 200px;
height: 400px;
}This would make all <p> elements be 200 pixels wide and 400 pixels tall.
In conclusion HTML and CSS are what makes websites the way they are. HTML is used to structure your website, while CSS instructs how the HTML looks.