18
1) create folder on desktop

Iml 140 web_week_2_html_basics_

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Iml 140 web_week_2_html_basics_

1) create folder on desktop

Page 2: Iml 140 web_week_2_html_basics_

2) download an image & put it in your folder

(& name image)&

 

Page 3: Iml 140 web_week_2_html_basics_

3) create

"hello world".html 

Page 4: Iml 140 web_week_2_html_basics_

4) get placeholder text:

http://websitetips.com/articles/copy/lorem/

Page 5: Iml 140 web_week_2_html_basics_

6) insert sample text into body

tag: <body>  </body>

Page 6: Iml 140 web_week_2_html_basics_

7) insert image: 

<img src="name_of_file">

Page 7: Iml 140 web_week_2_html_basics_

8) add attributes:

Page 8: Iml 140 web_week_2_html_basics_

line break:

<br>

Page 9: Iml 140 web_week_2_html_basics_

paragraph break:

<p>  </p>

Page 10: Iml 140 web_week_2_html_basics_

change size of image:

<img src="file" height="" width="">

Page 11: Iml 140 web_week_2_html_basics_

change font color:

<font color="red">This text is in color.</font>

Page 12: Iml 140 web_week_2_html_basics_

<font color="red" font face="courier"

size="48">This text is in color.</font>

add more attributes:

Page 13: Iml 140 web_week_2_html_basics_

change background color

<body bgcolor="yellow"> </body>

Page 14: Iml 140 web_week_2_html_basics_

<img src="file" height="" width="" align="left" style="margin: 0px 10px

10px 10px"

 add padding around image -top - right - bottom – left:

Page 15: Iml 140 web_week_2_html_basics_

center “hello world” heading:

<center> heading </center>

Page 16: Iml 140 web_week_2_html_basics_

set markers:

<div> ______ </div>

Page 17: Iml 140 web_week_2_html_basics_

set marker attributes:

<div align=“justify”> _ </div>

Page 18: Iml 140 web_week_2_html_basics_

9) insert another image – this time from the Web:

 <img src=“web location“

height=“” width=“” align=“right”>