Week 1 : Self-Portrait
Jan 2023
Week 1: HTML/CSS/Javascript
self portrait
178.128.106.218
In-Class Code
<html>
<head>
<!-- metadata on the page -->
<title> Hello Angie </title>
<!-- CSS codes here-->
<style>
#divOne {
font-size: 100px;
}
#divTwo {
font-size: 50px;
background-color: cornflowerblue;
color: aliceblue;
}
</style>
<!--We should tell the browser that it's JavaScript--> <script type="text/javascript">
//you can also say this to include other scripts :
//<script type="text/javascript"> SRC= "scriptname.js">
//for alerts;
alert("hello there")
let aVar = "hello";
aVar = 12;
console.log(aVar);
//setup this to read the HTML file before we can access to any of the DOM elements
//load a fundtion() by writing 'load' : window.addEventListener('load', function(){
//very very very important !! remember ths pleaseeeee
let doo = document.getElementById("divOne");
console.log(doo);
doo.addEventListener('click', function(){
//change some elements in css by adding .style
doo.style.backgroundColor = "red";
})
});
</script>
</head>
<!--- contents go here -->
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 2</h3>
<!-- div = generic block level tag div id="" : give them a unique attribute-->
<div id="divOne">Here is some content</div>
<div id="divTwo">Here is another content</div>
<p id="pOne">paragraphs <span> <b> bold </b> <i> italics </i> hello hello </span></p>
<!-- add Media! -->
<!-- video : basic Tag Usage
<video width="number" height="number" src="video.mp4" controls />
mp4 is the standard container so do mp4 with avc and aac codec
you can add more events to the media with HTML audio/video Events
Make a self-portrait with some media elements + HTML + Audio + Visual -->
</body>
</html>
<!-- Comments
WebAssembly
querySelector : but wtf is query
DOM_events -->
<head>
<!-- metadata on the page -->
<title> Hello Angie </title>
<!-- CSS codes here-->
<style>
#divOne {
font-size: 100px;
}
#divTwo {
font-size: 50px;
background-color: cornflowerblue;
color: aliceblue;
}
</style>
<!--We should tell the browser that it's JavaScript--> <script type="text/javascript">
//you can also say this to include other scripts :
//<script type="text/javascript"> SRC= "scriptname.js">
//for alerts;
alert("hello there")
let aVar = "hello";
aVar = 12;
console.log(aVar);
//setup this to read the HTML file before we can access to any of the DOM elements
//load a fundtion() by writing 'load' : window.addEventListener('load', function(){
//very very very important !! remember ths pleaseeeee
let doo = document.getElementById("divOne");
console.log(doo);
doo.addEventListener('click', function(){
//change some elements in css by adding .style
doo.style.backgroundColor = "red";
})
});
</script>
</head>
<!--- contents go here -->
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 2</h3>
<!-- div = generic block level tag div id="" : give them a unique attribute-->
<div id="divOne">Here is some content</div>
<div id="divTwo">Here is another content</div>
<p id="pOne">paragraphs <span> <b> bold </b> <i> italics </i> hello hello </span></p>
<!-- add Media! -->
<!-- video : basic Tag Usage
<video width="number" height="number" src="video.mp4" controls />
mp4 is the standard container so do mp4 with avc and aac codec
you can add more events to the media with HTML audio/video Events
Make a self-portrait with some media elements + HTML + Audio + Visual -->
</body>
</html>
<!-- Comments
WebAssembly
querySelector : but wtf is query
DOM_events -->
Have a wonderful day :)
Random thought outlives here ︎︎︎