User:Cyrusty/Webdev

Lesson #9 HTML

HTML is a "markup" language which means that it's made of "tags" which are in the form of an opening tag, content and a closing tag, e.g. <TAGNAME>CONTENT</TAGNAME>. The whole thing is called an element. Elements can also have attributes inside the opening tag, e.g. <TAGNAME ATTRIBUTE="FOO">.

The content inside an element may be more elements which means an HTML document is a tree structure.

Describe paths etc...

Lesson #10 CSS

CSS is a language that describes the style of an HTML document and describes how HTML elements should be displayed. I have been learning abit of CSS the syntax for eg.

body {
    color: blue;
    font-size: 90px;
}

I can add a external style sheet to each page I want by putting in the head element of an HTML document instead of having the CSS directly in the HTML in a <style> element.

<link rel="stylesheet" type="text/css" href="NAME-OF-CSS-FILE.css" />

To work on different things using CSS that have the same class tag we use a id selector for eg I have put id="caterpillars" to specify the caterpillar images and id="butterflies" I made some changes to this using firebug by adding a new rule in using the id selector

<div class="image-slider" id="caterpillars" data-thumbs="100">
			<img src="http://www.organicdesign.co.nz/files/thumb/1/12/Yellow_caterpillar_with_red_face.jpg/500px-Yellow_caterpillar_with_red_face.jpg" />
			<img src="http://www.organicdesign.co.nz/files/thumb/f/f2/Red_hairy_caterpillar.jpg/500px-Red_hairy_caterpillar.jpg" />
			<img src="http://www.organicdesign.co.nz/files/thumb/1/17/Green_and_red_caterpillar_2.jpg/500px-Green_and_red_caterpillar_2.jpg" />
			<img src="http://www.organicdesign.co.nz/files/thumb/1/13/Black_caterpillar_with_yellow_stripes_1.jpg/500px-Black_caterpillar_with_yellow_stripes_1.jpg" />
			<img src="http://www.organicdesign.co.nz/files/thumb/3/39/Yellow_hairy_caterpillar_2.jpg/500px-Yellow_hairy_caterpillar_2.jpg" />
		</div>
		<div style="clear:both" />
		<div class="image-slider" id="butterflies" data-thumbs="100">
			<img src="http://www.organicdesign.co.nz/files/thumb/0/02/Butterfly3.jpg/520px-Butterfly3.jpg" />
			<img src="http://www.organicdesign.co.nz/files/thumb/e/ea/Orange_and_yellow_butterfly_1.jpg/520px-Orange_and_yellow_butterfly_1.jpg" />
			<img src="http://www.organicdesign.co.nz/files/thumb/5/55/Butterfly1.jpg/520px-Butterfly1.jpg" />
			<img src="http://www.organicdesign.co.nz/files/thumb/6/6f/Blue_butterfly_on_chia.jpg/520px-Blue_butterfly_on_chia.jpg" />
			<img src="http://www.organicdesign.co.nz/files/thumb/3/38/2015_red_butterfly_2.jpg/520px-2015_red_butterfly_2.jpg" />
		</div>
	</body>
</html>

#caterpillars .is-prev, #caterpillars .is-next {
    color: yellow;
}

I made the next and previous buttons yellow on the caterpillars slideshow by selecting the caterpillars id

Spaces specify things inside each other to make a path, and commas separate different paths from each other.

Describe how css uses paths into html...

Lesson #11 JavaScript

Javascript works like CSS in that it's all about selecting elements in the html doc, but it can change the doc JS can add new elements, change stuff, delete stuff.

I had a quick intro to Javascript with the nad in which I added this to a new page in cy.rusty.space/newpage.html

I put in this underneath the head tag in the HTML

</script>
<script src="https://code.organicdesign.co.nz/extensions/raw/master/jQuery/ImageSlider.js" type="text/javascript"></script>

I put the list of images in the body of the HTML inside a div element of class "image-slider" eg.

<div class="image-slider">
<img src="INSERT IMAGE HERE"/>
<img src="INSERT IMAGE HERE"/>
<img src="INSERT IMAGE HERE"/>
</div>

This created a slideshow.

To do a include javascript just like we add the css file we use the following code.

</script>