Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@roebi
roebi authored Jul 14, 2024
0 parents commit d1a7c5e
Show file tree
Hide file tree
Showing 4 changed files with 284 additions and 0 deletions.
43 changes: 43 additions & 0 deletions .github/workflows/static.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
# Runs on pushes targeting the default branch
push:
branches: ["master"]

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false

jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
# Upload entire repository
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
24 changes: 24 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.

In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to <https://unlicense.org>
25 changes: 25 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# 01-01 vanilla HTML 5 starter page

# What is this about?

This is about my vanilla HTML 5 starter page.

Have you ever heard of this HTML 5 tags ?

```html
<nav>
<main>
<section>
<header>
<details>
<summary>
<aside> , <hgroup> and
<footer>
```
# If not,

then take a closer look at this template and use it for your ideas and projects!

go to file location [index.html](./index.html)

show [inline raw content of index.html](https://raw.githubusercontent.com/roebi/01-01-vanilla-HTML5-starter-page/master/index.html)
192 changes: 192 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="en-US">

<head>
<!-- viewport to make your website look good on all devices -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta charset="utf-8" -->
<meta name="lang" content="en-US">
<!-- for search engines -->
<meta name="keywords" content="HTML5 Template Page">
<meta name="description" content="HTML5 Template with almost empty CSS and JavaScript Nodes">
<meta name="author" content="Robert Halter">
<!-- link rel="stylesheet" href="styles/style.css" -->
<style>
/* move to styles/styles.css */
html * {
font-family: sans-serif;
font-size: 16px;
line-height: 1.625;
/* default line-height is about 110% to 120% */
/* 26px = 1.625 * font-size 16px */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Applying_color */
/* https://www.w3schools.com/colors/colors_names.asp */
color: #000033;
/* https://color-hex.org/color/000033 contains mainly BLUE color. */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook */
}

section {
display: flex;
flex-direction: column;
}

aside {
float: right;
background-color: lightblue;
}
</style>
<!-- <script src="scripts/main.js"></script> -->
<script>
// move to scripts/main.js
// empty inline script
// JavaScript Standard Style
// https://standardjs.com/
// Rules
// https://standardjs.com/rules.html
console.log('inline script is run')
</script>
<title>HTML5 Template Page</title>
</head>

<body>

<!--main structure use of common HTML5 elements -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML -->
<!-- https://www.w3schools.com/html/html_layout.asp -->
<!-- https://www.w3schools.com/html/html5_semantic_elements.asp -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories -->
<!-- Beginner Tip for layout your page: -->
<!-- use -->
<!-- do NOT using tables for layout -->
<!-- HTML tables should be used for tabular data — this is what they are designed for. -->
<!-- see -->
<!-- https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics#when_should_you_not_use_html_tables -->

<header>
<!-- header of document -->
Header of document text.
<hr>
</header>

<nav>
<!-- Navigation often links -->
Navigation |
<a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>
<!-- CSS, HTML, JavaScript, and Web APIs. --> |
<a href="https://www.w3schools.com/" target="_blank">w3schools Learn to Code</a>
<hr>
</nav>

<main>
<!-- main specifies the main content of this document -->
<!-- only ONE main element in the document. -->

<section>
<header>
<!-- header of section -->
Header text of 'section with articles'.
<hr>
</header>
<!--Added hgroup to this group of text. Phillip Andrews-->
<hgroup>
<h2>Section with articles</h2>
<p>This tag is used to split a page into sections like Introduction, Contact Information, Details, etc.</p>
<p>Section defines the type of content.</p>
<p>A section can have nested sections.</p>
</hgroup>
<article>

<header>
<!-- header of article -->
Header text of 'article in section'.
<hr>
</header>

<aside>
<header>
<!-- header of aside -->
Header text of aside.
<hr>
</header>
<h2>Aside</h2>
Aside text.
<footer>
<!-- footer of aside -->
<hr>
Footer text of aside.
</footer>
</aside>
<!--Added hgroup to this group of text. Phillip Andrews-->
<hgroup>
<h2>The article</h2>
<p>The article contains independent content that does not require any other context.</p>
<p>Articles will contain the specific contents in that type of section.</p>
<p>But placing article inside of section is good practice.</p>
</hgroup>
<footer>
<!-- footer of article -->
<hr>
Footer text of 'acticle in section'.
</footer>
</article>
<footer>
<!-- footer of section -->
<hr>
Footer text of 'section with articles'.
</footer>
</section>

<hr>

<section>
<header>
<!-- header of section -->
Header text of 'section with details / summary pairs'.
<hr>
</header>
<h2>Section with details / summary pairs</h2>
<p>Details can be opend and closed.</p>
<p>Details can have nested details.</p>
<details open>
<summary>Summary of parent Detail</summary>
Parent detail text.
<details open>
<summary>Summary of child Detail</summary>
Child detail text.
</details>
</details>
<footer>
<!-- footer of section -->
<hr>
Footer text of 'section with details / summary pairs'.
</footer>
</section>

</main>

<footer id="footerOfDocument">
<!-- footer of document -->
<hr>
Footer text of document.
<div>validated with: <a href="https://validator.w3.org/#validate_by_input" target="_blank">W3C Markup Validation
Service</a></div>
<script>
// in footer of document add autor from header meta
const author = document.getElementsByName("author")[0].getAttribute("content");
// console.log("author:");
// console.log(author);
const newTextNode = document.createTextNode("author: " + author);
const newDivElement = document.createElement("div");
newDivElement.appendChild(newTextNode);
const footerOfDocumentElement = document.getElementById("footerOfDocument");
footerOfDocumentElement.appendChild(newDivElement);
</script>

</footer>

</body>

</html>

0 comments on commit d1a7c5e

Please sign in to comment.