HTML & CSS 1
HTML & CSS
11 October 2022 (Week 7)
Mabuchi ARATA / 0351579
Typograohy / Bachelor of Design (Hons) in Creative Media1, Introduction
From last week, we've started to learn about the way to use HTML to develop HTML, In this week, we've learnt about CSS which is besically the function to add additional function to the HTML files. This function helps to the HTML to add more features like links, changing colours, changing size of text and so on... The main topic for this lecture is about the way to use CSS to decorate your website. (I used Visual studio to develop my own website.)
2, Lectures
1, Inserting images
First of all, our lesson has been started from the way to apply images on my website (HTML file), to sum up the ideas first, I can just put single tag with letter "src" then apply the name of the images you want to add, make sure to save your HTML and image file in the same place. (Here is a link for more explanation.) In the first part of the lecture, we have learnt that to make sure to name each images more proper name to identify each images easily.
2, CSS
This was the main topic about what we've learnt during today's (2022/10/11) lesson, besically, CSS stands for Cascading Style Sheets to associate rules for webpages with HTML.
This is basically worked for establishing the layout of a webpage.
You can handle the contents of HTML by using CSS and It can be used to control the colour, font, size of text, the spacing between elements, position of elements in the website, what background images or background coloursare to be used, different displays for different devices and screen sizes, and other things can be done by handling CSS. In this eportfolio, We're going to take a look about what I've got about CSS.
1, Basic Preparation
Before we use CSS, we need to set up the basement for CSS, this must be done at the first part of the HTML code, to explain this simply, this is the part of the CSS statement to make a basic rules for website decoration. The examples are shown below.
<style>
body {
background-color:aqua;
width: 75%;
margin: auto;
}
.first-para{
text-indent: 30px;
}
.upper {
text-transform: uppercase;
}
p, li {
font-size: 1em;
text-shadow: 1px 1px 2px black;
text-align: justify;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
As the example above shows, all the CSS code must start with the tag of "style" to establish all ideas for the websites. We must identify the variables name for the presentation of HTML document, this is called "selectors". each identifies variable can be used more than one times to use in the HTML documents.
You can understand the idea about CSS as shown below.
<style>
sign to define the position to change{
Chamge detals;
}
variable name{
order of presentation for the elements in the HTML documents ※
}
</style>
※To explain more about this part, the part youwant to change "Like text, image colours..." is called "property" and the part which is about details of elements presentation is called "value".
2, Colour Change
This is the section where you can change the colours of elements exising in the HTML documents Background and text of colours, when you use the command of "body", you can also change the length of each lines of text compared to the width of HTML window itself. (In the HTML, you can also handle the with of text by changeing the length directly however, it's recommended to use percentage of the text to the HTML window rather than changing the length of text itself, this is because the HTML can change its size freely, so the text might be cut when you changed the size of window, therefore the you should use parcentage to change text length.).
If you want to change the colour of contents in your HTML file, type code as shown below.
1, Background
<style>
body {
background-color:aqua;
}
</style>
The way to change the background colour is simple, you just add the code of background-colour:(colour name);, in the tag of the style, therefore it can be said that you can just change the background colour easily by CSS.
2, Text
<style>
p, li {
font-size: 1em;
text-shadow: 1px 1px 2px black;
text-align: justify;
}
</style>
<p style="color:red;">Hello</p>
If you want to change the presentation of text, Once you state the details of values for each properties, apply selector into the each first sign of the text statement. When you want to change the colour of text itself, just add the statement of style="colour name;" directly.
3, Tag
I was struggling to applying tag which enable to access to the point where the tag points at, the method to applying a tag for HTML, you must type the code <href> inside of the code <a> as shown below.
<li><a href="#arata">About Me</a></li>
<li><a href="#food">Favourite Food</a></li>
<li><a href="#movie">Favourite Movie</a></li>
<li><a href="#sns">SNS</a></li>
Unfortunatelly, I forgot how I missed to type for Tag so I had to spend time to solve the problem., but it can be said that if you want to apply link to the point where you want to bring readers to the particular point, apply #(tag name) to both hyperlink tag and heading tag as shown below as example.
<h2 class="upper" id="movie">My favourite movie</h2>
To sum up the ideas for tag, you need to declear tag inside of the hyperlink tag, (which can be used as applying a link to a different webpage too) and inside of the header tag so you can easily access to the particular point by just clicking the link.
4, Image
CSS can adjust the images itself, the position and scale are also one of the point you must consider. To explain more about this, the CSS can adjust tyhe image size depends on the siae of the window as shown below.
max-width: 100%;
max-height: 100%;
height: auto;
The code "auto" can automatically addjust the size for the particular side you choose. In this code, the image fill the whole screen and adjust the size depends on the window's size.
The position of the image can be handled too. The code "float" and the position you want to put makes the image you want to show to place in different places. The example code is shown as below.
.right{
width: 20%;
height: auto;
float: right;
}
As the ideas I've shown so far, CSS code can adjust the position and scale for the text and images easily to express the elements for the website differently, however, you must use them following to he rule of CSS, if not you can't express the elements as you expected in ypur website.
5, Fonts
I use some advanced way to use different fond from google font, firstly, I downloaded the links from google fonts about the fonts I ant to use.
<head>
<title>Vision for the Unequal World</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2? family=Barlow+Condensed:wght@300&family=Pacifico&family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
After applying the links in the front of HTML code, make a statement in the CSS statement in the <style> tag like other CSS features
.barlow{
font-size: 48px;
font-family: 'Barlow Condensed', sans-serif;
}
.pacifico{
font-size: 24px;
font-family: 'Pacifico', cursive;
}
Once you made a font CSS statement, apply this font changing CSS to tags like normal text or heading text like example shown below.
<h2 class="barlow" style="color: white;" id="purpose">Purpose</h2>
As he result, you can use different font for your website.
3, Conclusion
To sum up the things I've done so far, I'm so satisfied to complite all of the CSS elements I've learnt so far, however, I haven't got the way to do several different ideas such as making different webpages and access to it, or place image and text in same height and so on, The usage of CSS is not also fully understood, but I tried to use CSS fully for my task.
4, My work
As interactive exercise, I made a Website with Using CSS and HTML The text and images are already given, Firstly, I sed the black and white colour to provide modern impression, when I used white background and black text the impression of webpage was cheap, therefore i thought opposite colour makes the text more modern.
White Background and black coloured text website
White Background and black coloured text website
The website itself is about the lecture for future innovation to solve problems around the world, so rather than using formal font, I decided to use fascinated and casual font to provide modern impression in this website (o the other hand i don't think I did good in this process because I have no enough time to check the text provided.)
Fonts I used
I used the code to maintain the ratio between most of the images and window size to disor the image on the website and viewers can see whole outlook of each images in any window pages.
コメント
コメントを投稿