diff --git a/img/img1.jpg b/img/img1.jpg new file mode 100644 index 0000000..706fe76 Binary files /dev/null and b/img/img1.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..09dd515 --- /dev/null +++ b/index.html @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + how to make a website + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + + This is a website about how to make a website. +

+ + +

please click option+command+I (mac) or F12 or Control+Shift+I (windows/linux) on chrome for developer tools so you can read the source code.

+ +
+ +

Go to GitHub.com. Create an account - choose your username wisely.

+

Create a repository called username.github.io. Click on "Get started by ... uploading an existing file."

+ +

Go to https://github.com/trhi/website. Click on the green <> code button -> download ZIP.

+

Unzip. Drag and drop the entire contents of the folder called "website-main" (includes two folders: img and work, as well as index.html) to the screen you have open for uploading files to your repository username.github.io

+

Wait a moment. Then navigate to username.github.io to see your website!

+ +
+ +

Download visual studio code. Open the index.html file in VS code and edit it. Save. Press "run and debug" to view the file in the browser.

+ +
+ +

Two very basic things: how to write text and how to display an image.

+

p, lower case, is for paragraph, the paragraph tag, a p. It is pronounced the same as pea 🫛.

+ + +

This is how you increase the font size of a pea 🫛.

+

This is how you add color to a pea 🫛.

+

This is how you increase the font size and the color of a pea 🫛.

+

This is how you emphasize a pea 🫛.

+ +

The more I repeat pea 🫛, the stranger it begins to sound 🔊.

+ +
+ +

I will now add an image:

+ + + + + + +

apple tree blossoms. A public domain image from wikimedia commons.

+ +

I want the image to be small: 50% of the width of the screen.

+ + +

apple tree blossoms. A public domain image from wikimedia commons.

+ +
+ +

Now I am going to create a div - a content division element. I am going to make a div that has all my images.

+ +

Now I am going to place the div so that it is perfectly centered on my page:

+
+ + +

apple tree blossoms. A public domain image from wikimedia commons.

+ +

Now I am going to add my own image. It is saved in a folder called img.

+ +

! This image works like a link. Click on the image. It will take you to a webpage that tells more about the work:

+ + +

image of a sculpture by Veijo Rönkkönen, photograph by Terhi Marttila

+
+ +
+

A list of websites written in html for you to explore. Copy and modify their source code:

+ + + + +

The first ever website in the world.

+

(?) A very early artist portfolio template by Christine Lastname

+

Terhi Marttila. Reads like a CV, with links to works.

+

Rafaela Nunes. A beautiful, elegant image gallery.

+

Lizz Thabet. Different kinds of projects.

+

Nick Montfort. Words, links, straight to the point.

+

100 days of websites. By Anna Y Lin.

+ + + +

A huge bunch of amazing websites by different artists. Click on their name to access their website.

+ +
+ +

Ask https://chat.openai.com/ (chatGPT) for help on how to write html.

+

Read the reference at Mozilla developer network for information on different html elements and their properties.

+

Look for advice on https://stackoverflow.com/, a forum where people advise eachother.

+

Read about and study html on w3schools.

+

Explore resources or take a free course on codecademy.

+ + + + + + + \ No newline at end of file diff --git a/work/img1.html b/work/img1.html new file mode 100644 index 0000000..1448e60 --- /dev/null +++ b/work/img1.html @@ -0,0 +1,21 @@ + + + + + + img1 + + + + +

This is a website about img1

+ +
+ +
+ + \ No newline at end of file