This week was our seond week of working with HTML and CSS, today we were primarily looking at adding images and building tables in our HTML and how we should style them appropriately using Cascading Style Sheets.
https://github.com/rebekaheleonard/baskerville
Viewports look at how accessible the website is on different device. Originally they were only created to be viewed on computers so had a vert static design and fixed look and design to them as there was no need to zoom in/out. Today there is so many devices and screen sizes webistes get displayed on so viewports become quite important when it comes to ensuring it displays well.
<meta name="viewport" content="width=devicewidth, initial-scale=1">
To build a table in HTML we use the table tag <table> accompanied by the caption, table heading, table row and table data tags. The <caption> works as a basic caption or title describing what the table contains, <th> or table heading is the title for each column of data, eg. name,age,DOB. We use <tr> to create rows for the <td> / table data to go into eg. Rebekah, 19, 130203.
We have two types of breaks we can use in HTML, a line break and a horizontal rule. A line break uses the tag <br> while a horizontal break uses the tag <hr>, with both of them are self closing elements. A line break is used as a character return to create breaks within the text although you should only use one at a time, if you want multiple spaces it is better to use CSS spacing. The horizontal rule is used as a topic shift or to intoroduce a new section to the website and inserts a horizontal line when used.
When we are adding images to our HTML it is important they are the correct dimesnions for your webiste so they won’t appear too big or too small. It is also important to compress your image as the bigger the image file, the more loading time it will take. Initially we can look at the file type as PNG files tend to be bigger files than JPEG files but another way to speed up these load times is compressing our images, there is so many great compression tools that reduce the file size by keep the image quality as good as it can be. Examples of these tools are tinyjpg or tinypng.