Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

BASIC HTML AND CSS

The document provides a comprehensive guide on building a café menu webpage using basic HTML and CSS. It outlines the essential structure of an HTML document, including the use of elements like <head>, <body>, <style>, and <div>, as well as how to style them with CSS. Additionally, it covers best practices for organizing code, linking stylesheets, and using various CSS properties for layout and design.

Uploaded by

Nuno Barroca
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

BASIC HTML AND CSS

The document provides a comprehensive guide on building a café menu webpage using basic HTML and CSS. It outlines the essential structure of an HTML document, including the use of elements like <head>, <body>, <style>, and <div>, as well as how to style them with CSS. Additionally, it covers best practices for organizing code, linking stylesheets, and using various CSS properties for layout and design.

Uploaded by

Nuno Barroca
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

BASIC HTML AND CSS

By building a café menu

Before starting any webpage, we need to follow a basic


structure, every HTML code-based document should start
with <!DOCTYPE html>. This should be followed by the
opening and closing <html> element.

<head>

After the opening statement and html element we can start


coding, The first we want to do is to add a <head>
element, this element is sued for holding meta information
like links or a title.

So, if we want to add a title to our webpage, we should


insert the element <title> nested inside the <head>. Like
this:

The <title> element Is one of several that provide extra


information not visible on the webpage, but it’s useful
for search engines or how the page gets displayed. One of
them is the <meta> element, if we add an attribute named
charset=”utf-8” this will tell the browser how to encode
characters for the page.
NOTE: <meta> is a self-closing element, meaning it doesn’t
need the </>.

<body>

Now we want to add some actual content to the website, for


this we need the <body> element.

The <h1> element is used when we want to really stand out


something on our page, normally we only use it once for
the displayable page title. This goes from h1 to h6.

The <p> element is a simple paragraph, and we use it to


add simple text.

To best organize our code, we can nest similar information


inside one element, so for example I can nest the <h1> and
the first <p> inside a <header> element.
Another famous element in which we nest code is the
<main>, inside the main we can add different <section>.
<style>

Until now we only structured the webpage without any style


to it, to star doing such thing we add the element <style>
nested inside <head>.
Now we choose which element we want to style, and we do
something like this:

When we have too many elements with the same styling, we


can create a list of selectors to make the code easier,
like this:

We have styled these elements by writing CSS inside the


style tags, but in the future, there will be many more
elements to style, so it’s best to put all the styles on a
separate file and link to it.

At the CSS file we repeat the process but in a different


and more organized file.

To style where we want our text we use “text-align” and


give it a position like “center”.

Now that we have our separate file for styling we need to


link it to the html file, we do this by nesting <link
rel=”stylesheet” type=”text/css” href=” styles.css”>
inside the <head> element.

For the styling of the page to look similar on a mobile as


it does on a desktop, we need to add a <meta> element with
a special content attribute. As so:

To change the color of the background we use the


“background-color” and we choose a color.
The <div> element is used mainly for design layout
purposes.
Now everything that is nested inside the <div> can be
styled together.
For example to change the width of all this elements we
simply write:

To comment on CSS we use the “/* */” combination.

The value of width doesn’t need to be in px, we can set it


for a percentage, so for example 80% will make the width
80% of the size of its parent element <body>.

The margins are invisible space around an element, we can


use different margin properties to decide the size of the
margin, or we can set it to auto.

Instead of using the selector like <div> to style elements


we can use a class selector. For this we need to replace
the div for .menu (for example), and then on the html file
add a class=”menu” inside the div.

Background-image lets us use an image a background.

On html, <article> elements commonly contain multiple


elements that have related information, like price and
flavor.

We can give a class to the <article> element so it becomes


easier to style, for example we can style all the <p>
elements with a class named item like this: .item p {}.

To give padding to our elements we use “padding-“ and set


the value in px or percentage. If we want the same padding
on all sides, we just need to write “padding”.

We can add a “max-width” so the elements don’t appear to


far apart on a large screen.

To change the font on all the webpage we use ”font-family”


and set it to a font that the computer recognizes. We can
add a fallback font by adding another font after the first
one, separated by a comma.
To change the style of the font we use “font-style”, we
can set it to italic or bold. To change the size: “font-
size”.

On html we can use <hr> (self-closing) to visually


separate elements. The <hr> element has a border, to alter
the border color we type “border-color”.

We can style a link for it to change color when someone


has already visited it - a:visited – or when someone’s
mouse hovers over – a:hover – or when someone’s click on
it – a:active.

To center a image we use display: block and margin-:auto.

You might also like