HTML for editors

--- title: HTML for editors tags: lentiamo --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} # HTML for ediors --- ## CodePen note: - show interface - explain what it is (usage, the training) - minimise JS and CSS (double click on HTML header) - share [CodePen link in professor mode](https://codepen.io/Kout/professor/ExbEMrd?editors=1000) - duplicate the page and in one instance rewrite the _professor_ to _pen_ in the address bar - click on _fork_ at bottom right - create an account - you have now your own clone of the training website - either watch me (the professor mode) or do after me in your live version - if you struggle, stop me and ask (share your screen) --- ## HTML - **H**yper**T**ext **M**ark-up **L**anguage - gives structure to the text => can be processed by machines - all white space is reduced to single space --- ### Mark-up - ~ wrap text in tags - most of tags live in pairs (opening + closing) - `<h1>Sunglasse trends in 2022</h1>` * `<h1>` is opening tag * `</h1>` is closing tag tag note: - we'll start with the **ML** part of the HTML abbreviation - if it make sense tags can wrap other tags - Sense? Every tag has a [semantic meaning](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html) (with 2 exceptions). - There is over 130 tags, but you practically need 20. Let's look at some. --- ### Headings - `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` (we use up to `h3` on our website) - **Heads up**: number is not the order on the page, but the level of the heading. - in the most cases, there is just one `<h1>` on the page - to make machines happy, follow the hierarchy - Don’t skip a heading level only to get desired design, there are other ways to change the look. --- > **Exercise 1** > Add headings. --- ### Paragraphs and highlighing text - most of the text lives in paragraphs: `<p>` - to highlight some part of the text, wrap it in `<strong>` - **Heads up**: We do not use _italics_ on our website! note: - highlighting text helps readers to scan the page - don't overdo it --- > **Exercise 2** > Add paragraphs. Highlight some text. --- ### Bulleted lists - unordered lists => `<ul>` - the list as a whole is wrapped in `<ul>`, every item in `<li>` (list item) - inside `<ul>` are allowed only `<li>` - if you use `<ol>` as a wrapper, you will get _ordered list_ (eg. numbered) note: - inside `<li>` there can be other tags, even other lists --- > **Excercise 3** > Add lists. Nest the optic store list inside the second list item of the parent list note: - parents, children, nesting - indentation (helps human readablity, white space is reduced to single space) --- ### Anchors aka links - `<a>`, but we must also say where the link should go… --- ### Attributes ```html <tag attribute="attribute value">text</tag> ``` note: - inside the opening tag (only there) - there can be more attributes, but each must be unique (duplicities are ignored) - separate by gaps - name + value pair --- ### Anchors aka links - `href` attribute contains the address of the link ```html <a href="link address">link text</a> ``` note: - the **HT** part of the HTML abbreviation --- #### 1. Another page on the same website: - start with `/` + link-to-page => https://same-page.cs/link-to-page ```html <a href="/link-to-page"> link to another page on the same website </a> ``` --- #### 2. Another page on some other website - ideally copy/paste the full URL from address bar ```html <a href="https://another-website.cs/link-to-page"> link to another page on another website </a> ``` --- #### 3. Anchor on the same page (part 1) - anchor -> `<a>` - start with `#` + name of the part of the page, the anchor ```html <a href="#part-of-the-page"> stay on the page, just scroll up/down </a> ``` note: - to make this happen, the anchor must exist on the page: mark an element with unique identificator (often a heading) --- #### 3. Anchor on the same page (part 2) ```html <h2 id="part-of-the-page"> New section of the page </h2> ``` **Heads up**: don't add the `#` in the `id` attribute! --- > **Exercise 4** > Add link to sunglasses category. Create an anchor from one of the 5 trends and create an anchor link from part of the first paragraph. --- ## Questions and answers note: - more about HTML in [Marksheet.io](https://marksheet.io/) --- ## Inspecting page (developer tools) note: - open the _pen_ in _debug_ mode - inspect element - what we see is not our HTML source code, but its interpretation by browser - Tags we added in our text have become _elements_. Elements with different properties. + the properties can be changed => via CSS (another language) - open misterspex.co.uk, inspect something + change something + reload page + it might be useful * quickly test something on our page (Does the text fit in? Can we change the image/font/indentation size? What if we remove this part?) * look at competion or another 3rd party website and grab some content which is normally inaccessible * check the website in different screen sizes --- ## CSS in 3 min note: - the properties can be changed + `h1` smaller font size and regular - on our page (others do it to) we use so called classes + prepared set of rules for element + by adding the class on the element, you change its design - show `class` in HTML - show changing the `h1` on our page (devTools) --- ## Simple pages WYSIWYG editor Saves us some work… <small>…but may add another.</small> note: - if you paste in the text, it gets automatically wrapped in paragraphs - adding links or bulleted lists is easy - adding an anchor only via _Source_ (showing us raw HTML) - adding headings: would you like to get this option in the editor? - details (FAQ pages): save only when all options are collapsed - don't use `h1` in the simple pages body, these are automatically removed --- ### Thanks! --- --- # Sample text for exercises (Copy/paste the text in the CodePen.io.) The sunglasses fashion for summer 2022 Spring and summer 2022 is clearly all about statement sunglasses. Whether rectangular, neon or mono - the more eye-catching and extravagant, the better! But what size am I? To measure the size of your face: - use our online tool - visit our optic store + Křemencova + Radnická - use credit card Back to trends: there are plenty of them. And so are hip sunglass brands. And they all claim to be the most fashionable and modern. So we wondered: what are really the sunglasses trends of summer 2022? Our trend editors have taken a look at the international catwalks, scoured fashion magazines and analysed the eyewear fashion on the streets of our big cities. And this is what came out: The Lentiamo list of the 5 sunglasses trends of 2022. Trends of 2022 1. Slim Shades Slim, rectangular Sunglasses are here to stay. Already very popular in the summer of 2021, these sunglasses will continue to dominate our streets in 2022! However, in a slightly different design than a year ago. 2. Neon Sunglasses The next big sunglasses trend in 2022 is even more eye-catching, especially in terms of colour. Because what we'll see everywhere this summer are neon-coloured sunglasses lenses in yellow, orange and pink! 3. White Sunglasses If neon-coloured sunglasses are too flashy for you, go for a white sunglasses frame. They are no less fashionable. 4. Black Sunglasses In stark contrast to white sunglasses are classic black sunglasses. What may not immediately sound like a mega-trend but rather like standard shades is making a sensational fashion comeback in 2022! 5. Mono Lens Sunglasses and Shield Sunglasses Mono lenses are back! The accessory that brought stars like JLo to fame is back in eyewear fashion. This year, mono lens sunglasses are more futuristic than ever. Because this season it's all about maxi lenses.