Welcome!
Who are we?
Sylvain
Ludovic
What is a web page?
What is a web page?
It's all about
structure
style
content
Content
Structure
Paragraph
Paragraph
Paragraph
Title
Image
Style
Title size
Links color
Background color
...
Content and structure
HyperText Markup Language
Structure = tags
<p>My first page</p>
Opening tag
Closing tag
Content
<h1>My first web page</h1>
<p>Hello world!</p>
Each tag has a meaning
A page is a tree
<html> <body> <h1>...</h1> <p>...</p> <p>...</p> <div> <a>...</a> </div> </body> </html>
Let's play!
| <p> | Paragraph |
| <em> | Italics |
| <strong> | Bold |
| <a href="..."> | Link |
| <h1>, <h2>, ... | Titles |
| <img src="..."> | Image |
tinyurl.com/ictgirlshtml
- Add a link to your favourite website
- Replace the image with an image of your favourite animal
- Customize the title and the text
Styling
Cascading Style Sheets
CSS syntax
Tag selector
<html>
<body>
<p>Welcome to my site</p>
<div>...</div>
<div class="question">
<div>...</div>
<p>What is your name?</p>
</div>
</body>
</html>
Class selector
<html>
<body>
<p>Welcome to my site</p>
<div>...</div>
<div class="question">
<div>...</div>
<p>What is your name?</p>
</div>
</body>
</html>
Multiple selectors
<html>
<body>
<p>Welcome to my site</p>
<div>...</div>
<div class="question">
<div>...</div>
<p>What is your name?</p>
</div>
</body>
</html>
Let's play!
Make your page look like this:
Let's play!
| color | Text colour, for example blue |
| background-color | Background colour, for example yellow |
| font-size | Font size, for example 16px |
| text-align | Text alignment, for example left, right, or center |
| border | Border style, for example 2px solid red |
Let's play!
Solution: tinyurl.com/ictgirlscss
The developer toolbar
Congratulations!
You now know the basics of web development