firs commit

f2acode · Sep 30, 2017 · c0e8aec · c0e8aec
commit c0e8aec
Show file tree

Hide file tree

Showing 13 changed files with 359 additions and 0 deletions.
diff --git a/1 - Access and secure data/1 - Create the document structure/layout-container/layout.html b/1 - Access and secure data/1 - Create the document structure/layout-container/layout.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div.container {
+    width: 100%;
+    border: 1px solid gray;
+}
+
+header, footer {
+    padding: 1em;
+    color: white;
+    background-color: black;
+    clear: left;
+    text-align: center;
+}
+
+nav {
+    float: left;
+    max-width: 160px;
+    margin: 0;
+    padding: 1em;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+nav ul a {
+    text-decoration: none;
+}
+
+article {
+    margin-left: 170px;
+    border-left: 1px solid gray;
+    padding: 1em;
+    overflow: hidden;
+}
+</style>
+</head>
+<body>
+
+<div class="container">
+
+<header>
+   <h1>City Gallery</h1>
+</header>
+
+<nav>
+  <ul>
+    <li><a href="#">London</a></li>
+    <li><a href="#">Paris</a></li>
+    <li><a href="#">Tokyo</a></li>
+  </ul>
+</nav>
+
+<article>
+  <h1>London</h1>
+  <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
+  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
+</article>
+
+<footer>Copyright &copy; W3Schools.com</footer>
+
+</div>
+
+</body>
+</html>
diff --git a/1 - Access and secure data/1 - Create the document structure/readme.md b/1 - Access and secure data/1 - Create the document structure/readme.md
@@ -0,0 +1,80 @@
+## Useful concepts
+
+### Semantic element
+A element that provides meaning to both user agents and humans about what the enclosed content is, e.g., `<section>`.
+
+### Non-semantic element
+A element that doesn't provides meaning to both user agents and humans about what the enclosed content is, e.g., `<div>`.
+
+## Tags
+
+### `<section>`
+
+This one defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
+
+This is a *semantic element*.
+
+This element is more generic, you use this one when none of the other semantic elements are appropriate. You use it to combine portions of your document together into discrete units that you can describe as related in some way. If you can't describe the elements in the section in one or two sentences, then you probably shouldn't use the element.
+
+Instead, you should use the `<div>` element. This one is a non-semantic element. If the content you're trying to combine doesn't have a semantic meaning, but you still need to combine it for styling, then this element is the appropriate element to use.
+
+There are other elements that should be used before this one:
+
+* `<article>`
+* `<aside>`
+* `<nav>`
+
+### `<article>`
+
+This tag is a independent, self-contained content.
+
+Use this one when the content is an independent part of the site that can stand alone and be syndicated like an article or blog post.
+
+### `<nav>`
+
+Defines the major block of navigation links. Not use with all the links.
+
+### `<header>`
+
+This tag represents a container for introductory content or a set of navigational links.
+
+That can contain heading elements (e.g., `<h1>`), logo/icon, authorship information, etc.
+
+You can have several tags like this in one document.
+
+This tag cannot be placed within a `<footer>`, `<address>` or another `<header>` element.
+
+### `<footer>`
+
+Defines a footer for a document or section.
+
+This tag should contain information about its containing element.
+
+* Authorship
+* Copyright
+* Contact
+* Related documents
+* Others
+
+### `<aside>`
+
+Defines some content aside from the content it is placed in. 
+
+You need to define the style, or it isn't going to be aside.
+
+* Citations inside a article, for example.
+* Aside glossary **related** to the text.
+
+Navigation, ads, search boxes, blogrolls and so on are not directly related to the article and therefore do not justify the use.
+
+### `<main>` 
+
+Specifies the main content of the page. One page should have only one main content.
+
+### `<figure>` 
+
+This tag is used to insert a figure, and to include the description of the figure we can use `<figcaption>`
+
+## Layout
+
+That is just the disposition of the tags inside the `<html>`. A good layout should follow the rules of each `html` tag.
diff --git a/1 - Access and secure data/1 - Create the document structure/semantic-tags/article.html b/1 - Access and secure data/1 - Create the document structure/semantic-tags/article.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Page Title</title>
+</head>
+
+<body>
+
+    <article>
+        <h1>Google Chrome</h1>
+        <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
+    </article>
+
+</body>
+
+</html>
diff --git a/1 - Access and secure data/1 - Create the document structure/semantic-tags/aside.html b/1 - Access and secure data/1 - Create the document structure/semantic-tags/aside.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Page Title</title>
+</head>
+
+<body>
+
+    <div style="background: lightblue">
+        <div>My family and I visited The Epcot center this summer.</div>
+        <aside style="background: lightgreen">
+            <h4>Aside here</h4>
+            <p>The Epcot Center is a theme park in Disney World, Florida.</p>
+        </aside>
+    </div>
+
+</body>
+
+</html>
diff --git a/1 - Access and secure data/1 - Create the document structure/semantic-tags/figure.html b/1 - Access and secure data/1 - Create the document structure/semantic-tags/figure.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Page Title</title>
+</head>
+
+<body>
+
+    <figure>
+        <img src=”http://meusite.com.br/assets/imagem.jpg” alt=”Imagem”>
+
+        <figcaption>Figura 1. Imagem</figcaption>
+    </figure>
+
+</body>
+
+</html>
diff --git a/1 - Access and secure data/1 - Create the document structure/semantic-tags/footer.html b/1 - Access and secure data/1 - Create the document structure/semantic-tags/footer.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Page Title</title>
+</head>
+
+<body>
+
+    <footer>
+        <p>Posted by: Hege Refsnes</p>
+        <p>Contact information: <a href="mailto:someone@example.com">
+                someone@example.com</a>.</p>
+    </footer>
+
+</body>
+
+</html>
diff --git a/1 - Access and secure data/1 - Create the document structure/semantic-tags/header.html b/1 - Access and secure data/1 - Create the document structure/semantic-tags/header.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Page Title</title>
+</head>
+
+<body>
+
+    <article>
+        <header>
+            <h1>Most important heading here</h1>
+            <h3>Less important heading here</h3>
+            <p>Some additional information here</p>
+        </header>
+        <p>Lorem Ipsum dolor set amet....</p>
+    </article>
+
+</body>
+
+</html>
diff --git a/1 - Access and secure data/1 - Create the document structure/semantic-tags/main.html b/1 - Access and secure data/1 - Create the document structure/semantic-tags/main.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Page Title</title>
+</head>
+
+<body>
+
+    <main>
+        <h2>Titulo</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
+
+        <article>
+            <h3>Subtítulo</h3>
+            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum...</p>
+        </article>
+    </main>
+
+</body>
+
+</html>
diff --git a/1 - Access and secure data/1 - Create the document structure/semantic-tags/nav.html b/1 - Access and secure data/1 - Create the document structure/semantic-tags/nav.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Page Title</title>
+</head>
+
+<body>
+
+    <nav>
+        <a href="https://www.w3schools.com/html/">HTML</a> |
+        <a href="https://www.w3schools.com/css/">CSS</a> |
+        <a href="https://www.w3schools.com/js/">JavaScript</a> |
+        <a href="https://www.w3schools.com/jquery/">jQuery</a>
+    </nav>
+
+</body>
+
+</html>
diff --git a/1 - Access and secure data/1 - Create the document structure/semantic-tags/section.html b/1 - Access and secure data/1 - Create the document structure/semantic-tags/section.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Page Title</title>
+</head>
+
+<body>
+
+    <h1>This is a Heading</h1>
+    <p>This is a paragraph.</p>
+
+    <section style="border: 1px solid blue">
+        <h1>This is a section</h1>
+        <p>And a paragraph inside a section</p>
+    </section>
+
+</body>
+
+</html>
diff --git a/...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/index.html b/...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Javascript Training</title>
+    <script src="./scripts.js"></script>
+</head>
+
+<body>
+
+    <article>
+        <h1>Title</h1>
+        <a id="accessKey" href="https://www.google.com">Paragraph1</a><br>
+        <p>Paragraph1</p>
+        <p>Paragraph1</p>
+        <p>Paragraph1</p>
+        <p>Paragraph1</p>
+    </article>
+
+</body>
+
+</html>
diff --git a/...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/scripts.js b/...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/scripts.js
@@ -0,0 +1 @@
+document.getElementById("accesskey").accessKey = "o";
diff --git a/...Access and secure data/2 - Write code that interacts with UI controls/readme.md b/...Access and secure data/2 - Write code that interacts with UI controls/readme.md
@@ -0,0 +1,31 @@
+## DOM Elements
+
+### DOM Nodes
+
+In the HTML DOM (Document Object Model), everything is a **node**:
+
+* The document itself is a document node
+* All HTML elements are element nodes
+* All HTML attributes are attribute nodes
+* Text inside HTML elements are text nodes
+* Comments are comment nodes
+
+### Element Object
+
+In the HTML DOM, the **Element object** represents an HTML element.
+
+Element objects can have **child nodes** of type element nodes, text nodes, or comment nodes.
+
+A **NodeList object** represents a list of nodes, like an HTML element's collection of child nodes.
+
+### The Attr Object
+
+In the HTML DOM, the **Attr object** represents an HTML attribute.
+
+An HTML attribute always belongs to an HTML element.
+
+### The NamedNodeMap Object
+
+In the HTML DOM, the **NamedNodeMap object** represents an unordered collection of an elements attribute nodes.
+
+Nodes in a NamedNodeMap can be accessed by name or by index (number).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		document.getElementById("accesskey").accessKey = "o";