What is HTML?
What is CSS?
How to make a mobile friendly site:
HTML is a markup language used to create web pages.
Setting up an HTML file :
- Creating an index.html file
A tag consists of an opening and closing delimiter:
<TAG> CONTENTS </TAG>Note that a tag does not necessarily have content and can be unique
<TAG>The minimal content of an HTML file:
<!DOCTYPE>
<html>
<head>
<meta charset="utf_8" />
<title>TITRE</title>
</head>
<body>
</body>
</html>- The
<!DOCTYPE>tag is used to indicate the version of the HTML document used. - The
<html> / </html>tag will contain all the HTML content of the document. - The
<head> / </head>tag provides general information about the HTML document (e.g. page title, link to CSS file, etc.). - The
<meta ... />tag is used to place metadata in an HTML document, the charset is used to define the encoding of the page - The
<title> / </title>tag as its name suggests, contains the title of the page. - The
<body> / </body>tag contains the content of the HTML document (it is in this tag that we could add other tags to display content on our HTML document).
It is important to know that tags can nest, in the example above, the <html> tag contains the <head> and <body> tag.
As for the <head> tag, it contains the <meta> and <title> tag.
Thus the site is broken down into nestable boxes with their contents.
Some useful tags:
- Title tag:
<h1>Content</h1> to <h6>Content</h6>Note that the number defines the size of the title.
- Text tag:
<p>Content</p>
- line break:
<br>- Bulleted list creation:
<ul>
<li>EPITECH</li>
<li>E-ARTSUP</li>
<li>ISEG</li>
</ul>A tag can be configured, thanks to attributes and an attribute takes a parameter
<TAG [ATTRIBUTE 1] [ATTRIBUTE 2] > CONTENT</TAG> [ATTRIBUT x] => ATTRIBUT_NAME="PARAMETER".
The next tags will address this notion.
- Creating a hyperlink to another web page (redirection):
<a href="site link">Content</a> - Adding an image:
<img src="image link" alt="image caption">- Box containing the page header (top part of the page):
<header>Content</header>: header (top part of the page).Warning: some sites do not have a header.
- Box containing the footer (bottom part of the page).
<footer>Content</footer>- Box containing the navigation bar
<nav>Content</nav>- Creation of a new box:
<article>Content</article>
<div>Content</div>- Creating a table:
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>- Display a title in the body
- Displaying a subtitle
- Make a comprehensive list of your 3 favorite dishes in a box.
- Add an image and its caption
- Create a link on the image so that we are redirected to a site consistent with it.
- Make a descriptive text under the image and in agreement with it!
- Create a footer in which you will display: © followed by the current year and a name.
CSS is a computer language used to format an HTML document.
CSS can be placed in a separate file with the .css extension. It is a good practice.
To link a CSS file to an HTML document, place a unique <link/> tag with a rel=”stylesheet” attribute and href="file link" in the tag <head>
<link rel="stylesheet" href="style.css" type="text/css">Class and ID:
- The id attribute defines an identifier that must be unique in the HTML document (see example below). This allows you to modify a box without modifying boxes with the same tag!
<div id="exemple"></div>- The class attribute allows all boxes with the same class (see example below).
<div class="bloc"></div>
<div class="bloc"></div>How to make a formatting with the CSS file:
- To change the layout of a tag, we write the name of the tag followed by braces.
body {
font-size: 20px;
font-family : 'poiret';
font-weight: bold;
}- To modify the layout of a single tag (with an id), we write the name of the id preceded by a "#" :
#bloc_col {
padding-top: 3em;
display: bloc;
max-width: 60%;
margin: 0 auto;
}- To modify the layout of several tags (with a class) we write the name of the class preceded by a ".":
.bloc_col {
padding-top: 3em;
display: bloc;
max-width: 60%;
margin: 0 auto;
}All the proprieties between the braces (e.g: font-size, color, ...) allow you to modify the layout of the web page.
Exercices :
- Create a .css file named "style.css".
- Center the title and subtitle and modify their fonts.
- Remove the bullets from each item on the list.
- Change the size of the image. Place it as you wish.
- Change the text size, font and bold.
- change the background of your site.
To go further:
- Create a one-line navigation bar that for each word redirects us to another page.
- remove highlighting and change the font color to black.
- Create a new HTML page requesting confirmation of access to the site, it should precede the page you have created.
- Place the text under the image to the right of it (you will have 2 columns after this modification).
You can add in the head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This line will resize the page for the mobile version.
But in general this is not enough, so we can specify in the CSS a specific layout that only applies on mobile:
@media only screen and (max-width: 600px) {
// put here CSS class
}