Want to create interactive content? It’s easy in Genially!
Design a page - Session 1
Manuel Jose Martinez
Created on April 7, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
<Let's design your web page
Welcome>
let's start>
>
>
<Objectives>
Learn what is a web page
Explore the HTML programming language
Start to code in Visual Studio Code
wHAT ARE WE EXPECTING WITH THESE SESSIONS?
Let's START>
>
>
>
>
<01> A WEB PAGE
Let's start!
Let's START>
>
>
LET'S DISCUSS:
1. What is a web page? 2. What do we use a web page for?
>
>
discussion
Let's socialize your answers!
>
>
// A WEB PAGE
Information reaches different users through different screens and devices
The image on the screen is the part of the interface that presents the information to the user. The keyboard, mouse and touch screen are other interface components that allow the user to interact with the information.
>
>
// A WEB PAGE
HTTP SERVER
DATA BASE
LANGUAGE
OPERATING SYSTEM (LYNUX, WINDOWS, MAC,ETC.)
HARDWARE
>
>
// HTTP
HTTP: HYPER TEXT TRANSFER PROTOCOL
>
>
// MANDATORY ELEMENTS
IP IS THE UNIQUE IDENTIFICATOR OF EVERY DEVICE CONNECTED TO THE NETWORK
168. 176. 45.64 = https://www.colombobogota.edu.co/
CORRESPONDS TO THE ADDRESS OF A DOMAIN
>
>
// MANDATORY ELEMENTS
URL IS THE COMPLETE ADDRESS OF A FILE OR A RESOURCE IN THE NETWORK
https://www.colombobogota.edu.co/biblioteca/
NAME OF THE DOMAIN
PROTOCOL
NAME OF THE FILE
>
>
// FOR OUR WEB PAGE
We will group the files vinculated into an external file vinculated to the HTML document.
estilos.css
intro.html
>
>
<02> html
Welcome to HTML language
let's start
>
>
LET'S DISCUSS:
1. What is the HTML language? 2. What content I should have and I shouldn't have in my web page?
>
>
discussion
Let's socialize your answers!
>
>
// the html language
HYPERTEXT MARKUP LANGUAGE
A box inside of another box
>
>
// the html language
The hyper texts in HTML are based in the DOM model:(Document Object Model)
>
>
// MANDATORY ELEMENTS
An HTML document is composed of defined elements by labels (Start and close)
<p> Paragraph inside of the page </p>
>
>
// MANDATORY ELEMENTS
The elements have attributes, and the attributes have values
<p color="#0011FF">Text in blue </p>
>
>
<03> Let's start coding!
Let's download Visual Studio Code
let's start
>
>
// visual studio code
DOWNLOAD VISUAL STUDIO CODE FOR YOUR COMPUTER
>
>
Let's create a folder called First examples (In the desktop)
// visual studio code
>
>
// visual studio code
We will create our html document called Exercises.html
>
>
// let's start to practice
Send your advances into the Whatsapp group:
>
>
// visual studio code
How to code a header:
<!DOCTYPE html> <html> <head><meta charset="UTF-8"> <meta lang="es"> <title> The title of your page</title></head></html>
>
>
// visual studio code
Looking like this:
>
>
// visual studio code
How to run your document:
>
>
// visual studio code
How to code the title of the page:
...</head><body><h1>This is the title of the page</h1></body></html>
>
>
// visual studio code
Looking like this:
>
>
// visual studio code
How to code the paragraphs of the page:
...</head><body><h1>This is the title of the page</h1><p>This is the paragraph of the page</p></body></html>
>
>
// visual studio code
Looking like this:
>
>
// visual studio code
Save your exercises:
>
>
// for next session:
Bring all the information that will appear in your web page: We will create a page that talks about a social problematic
Have all your information in a word file: - The problematic - Causes and consequences - Solutions
>
>
<Let's review our Objectives>
Learn what is a ______
Explore the ______ programming language
______ to code in Visual Studio Code
well done for today!
>
THANK YOU!SEE YOU NEXT SESSION :)