web-design-u1/images.html at main · NNHSComputerScience/web-design-u1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>

<head>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width">
  	<title>Notes on Elements and Images</title>
  	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  	<h1>Notes on Element Behavior and Images</h1>
	<hr>

	<!--
	Images: 2 types - external and internal (local)
	Both behave as inline elements by default.
	ALWAYS use the 'src' and 'alt' attributes to reference the location of the image itself and desribe an image (in case it doesn't load or for screen readers).
	-->

	<!-- Local image example - located in same directory or sub-directory -->
	<img src="images/NNHSbanner.jpg" alt="Naperville North High School Webpage Banner" width="90%" title="NNHS Banner for the top of the page">
	<br>
	<img src="images/NapervilleNorthIcon.png" alt="NNHS icon" width="100px" title="NNHS Icon">

	<!-- External image example - located elsewhere on the web and linked to using a URL -->
	<img src="https://nnhsnorthstar.com/wp-content/uploads/2018/02/Feb27shortstoryphoto-900x600.jpg" alt="NNHS huskie image" width="250px" title="NNHS Husky Image">

	<!--
		Tags vs. Elements
		Tag: A tag is just referencing the symbols for either the opening or the closing tag. e.g. <p> is one tag and the </p> is another tag.
		Element: References both tags (or one tag) and all of the content between those tags.
		e.g. This is a paragraph element: <p> This is a paragraph. </p>
	-->

	<!--
		Element Behavior:
		BLOCK vs. INLINE elements.  A block element usually stacks one on top of the other. Inline elements flow right into each other.
	-->
	<!-- A paragraph and heading are block elements -->
	<h2>Heading</h2>
	<p>Paragraph</p>

	<!-- A bold and italicized word are inline elements -->
	<p>This is a paragraph with <b>bold</b> and <i>italics.</i></p>

	<!--
		<div> is a way to group elements into a block-level element. It's used to target specific content in the html. The 'id' attribute is a way to identify an element. We may do this so we can later target this content for styling.
	-->
	<div id="intro">
		<h3>This is a div heading.		</h3>
		<p>This is a div paragraph.		</p>
		<!-- The <span> tag is a way to group inline content together. We can 'id' it to refer to elsewhere in our code. -->
		<p>This is a div <span id="em"> with a span</span> in the paragraph.		</p>

	</div>

</body>

</html>