Returning to editing our page, the primary text area of the page form is the body field. This is taken over by an editing interface called the CKEditor. The CKEditor is what's called a WYSIWYG editor, "what you see is what you get". Meaning, it will attempt to emulate common office software like Microsoft Word. However, on the back end it will be generating HTML code like we looked at at the beginning of this class. You can see this in action by typing something into the window and then clicking the first button within the interface, "Source". This will expose the generated html. Clicking "Source" again will return to the normal view. Detailed documentation on the CKEditor can be found by going to the CFAES help menu in your toolbar, and clicking CKEditor help. While you certainly can begin a new page by typing content directly into the CKEditor, very often we come to web content with drafts written in other applications such as Microsoft Word or from an email. The CKEditor will allow you to copy and paste from other locations and will do its best to maintain the structure and formatting of the pasted text. However, it's highly recommended not to rely on this. Pasting formatted documents in the CKEditor can bring with it foreign and broken code, as well as styling that may conflict with university brand standards. There are options for dealing with these issues and bringing in pasted content. Pasting works very similar to most office programs. Once you have content copied to your clipboard from the source document, click into the CKEditor and using the keyboard hit CTRL+V or Command+V on a Mac to paste the contents of your clipboard into your document. There are buttons for cut copy and paste at the top of the CKEditor, however most browsers have blocked their functionality. The common keyboard shortcuts will work for these kind of actions in most cases. As we said previously often text pasted them from other sources comes with non-compatible styling. To preserve the links in your document but get rid of any styling, highlight the pasted text and then click the remove formatting button. This looks like an italic "T" with an underline and an "x", it is in the last line of buttons in the CKEditor. Text pasted in from emails and or other unknown sources can often have tracking codes within links and other issues within the code. Even if those aren't visible to you. In those cases it is best practice to paste in as plain text, and then do the formatting and linking of the text within CKEditor. To accomplish this hold down the shift key with the normal shortcut for pasting. So in the case of a pc it would be shift control v or in the case of a Mac it would be command plus shift plus v to paste in the content as plain text. You should not attempt to paste images, either on their own, or as part of other documents, into the CKEditor. This can cause a number of problems, even if it appears to have worked there are a number of issues that can cause damage to your website. You should instead download and save the image to your hard drive and then upload it using the IMCE file browser to be embedded in the page later. Once you have brought your text into the CKEditor, be sure to create the appropriate sections and headings for your page. If you brought your text in as plain text, you will need to replace the carrier return at the end of each paragraph block with a full paragraph return. You can tell the difference because paragraph breaks will have space between them. To do this just go to the beginning of the line hit backspace and then hit enter. You can assign headings to your document by clicking within a line of text and then clicking the format drop down which is the second drop down in the third row. By default normal is visible and selected by clicking this drop down you can choose between heading levels two through six. Remember heading level one is always the page title. While it is possible and even common for your pages to only have that h1 of the title, if your page is broken down in the sections, it's very important that you apply the appropriate level headings to each section. Do not skip levels or just use bold text as a heading. These semantic headings are very important and are used by assistive devices to navigate your page. Following the copy and paste buttons, are two arrows these are undo and redo buttons, these actions work the same as they do in many common programs and they can be accomplished with the same common keyboard shortcuts that you're used to. Control or command z depending on whether you're on a mac or a pc. The next two buttons are find and replace. As with most applications, clicking either of these will bring up a tabbed interface for both. These work very much like they do in programs like Word or Excel. Continuing on the first row of buttons the next few buttons are media buttons for images embed media and tables. We're going to skip those for now and come back to them later in this video. The next button is for inserting a horizontal line or an HTML terms a horizontal rule. What you will want to do to accomplish this, is give yourself an empty line and then click the button. This will insert a red line across the width of the content. As you add text and items to your page, in the bar at the bottom of the CKEditor your location in the html code you're generating will be displayed. For instance, when I click inside a paragraph, I see that my location is a "p" tag within the body for a paragraph. That means that i'm in a paragraph inside of the body of my document. If I click the HR I just created, the horizontal rule, this will change to "body hr". Depending on the browser that you may have to double click the line to get this location to stick. Once the line location is selected, in the styles drop down on the third row in the CKEditor, you will find options for this line. These include color options, as well as things like dotted lines. These context styles are available for many things you will create as you build your document. If you click back into the paragraph and look under styles you'll see options for different types of serif fonts as well as larger or smaller fonts. The next button on your toolbar is for inserting a page break. This will insert a page break into your document. It will be invisible for your users but will tell the document to break when it is being printed. This should be used sparingly, when a break is logical in the structure of the actual document. Theme updates can change font sizes and spacing which is out of your control and can impact the print layout of a document. The next button is the insert symbol button this will allow you to select characters to insert into the page. It includes the keys of the keyboard, but also many accented letters and symbols that can be difficult to type into the CKEditor. The final button on the first row is for building an accordion. We will deal with this button when we talk about media buttons later on in the video. The second row of buttons in the CKEditor is mostly filled with basic text formatting buttons. These work very similar to how they do in other programs. Bold italic and underline use their common keyboard shortcuts. Subtext and supertext, which are represented by an x with a 2 either in super or subtext respectively, are individual toggles to use them highlight the text that you would like to raise or lower and hit the appropriate button. The important thing to remember with these is that they are individual toggles and are not linked, if you hit both you will have sub super text, so basically smaller text somewhere in the middle of your line. To make a bulleted or numbered list highlight the text with each item separated with a paragraph break. Then click the bulleted or numbered list buttons that appear directly after the sub and supertext buttons, this will format the list as expected. Hitting enter after a line will insert a new item and iterate numbered lists accordingly. Hitting tab or shift tab will push an item in or out a level within the list. This can also be accomplished with the two buttons following the list buttons in the CKEditor. To choose a start point for your list or select from iterators, right click the list and go to bulleted or numbered list properties. To create a non-paragraph line break within a list item hold shift and hit enter. And then you can type in your subtitle. Directly after the list level buttons, the block quote button is represented with two large quotation marks. Clicking this while in a paragraph block will turn the entire paragraph into a block quote with a gray background. Alternatively, like we looked at earlier with the horizontal rule, the basic paragraph has styles available for call out boxes and floated quote boxes that offer a number of colors to create different kinds of insets within your document. The next series of buttons are basic justification and reading order buttons. There are four types of links you will make on your website: a link to another webpage, a link to a file like a pdf or word document, an email link, or a link to an anchor within your page. We're going to demonstrate how to make each of these links. To create a basic link to another web page highlight the text that you would like to link and then click the CKEditor button near the end of the second row that looks like a small chain link. This will open a dialog box for you to add details about the link. The display text is the text that you highlighted and can be edited here. Add the url of the web page that you are linking to in the url field. If you want your link to open in a new window, click the target tab and select new window or underscore blank. If you do select the option to open your link in a new window you should let your users know. Especially those that may be visually impaired. One way to accomplish this is to add "opens in a new window" to the display text of the of the link. Making a document link works very similar. Highlight the text that you wish to link and click the chain link button. Below the url field is a browse server button, this will open the file browser allowing you to navigate your server and select an existing file or upload the file you want to link to. Once you find the file that you're looking for, double click it to add the url to the link dialog. As with the website site link, if you configure your link to open in a new window, you should inform your users by editing the display text of that link. An email link will open an email in the user's default email client to an address you specify. To add an email link, select the text just as before and once in the link dialog under link type select email. This will expose fields for the email address, a default subject, and a default body. While a pre-filled subject can help sort incoming mail, it's important to remember that users can alter the email before they send it. So this default subject and body are not reliable later on. The last type of link that you can create is a link to an anchor within your text. This will allow a user to navigate not only to your page but to a specified position on the page just by clicking a link. To accomplish this first we need to identify the target location on our page. At the end of the line before our target section, we click the flag icon in the CKEditor menu. The resulting dialog will ask you to name this anchor. This name should have no spaces or punctuation and is not case sensitive. Clicking ok will place this flag in your document. This flag will not be visible to your end users. It's just there in case you want to edit or delete this anchor later. Once you have placed the flag, highlight the text you that you wish to link to it, and click the link button. One of the options in the link type drop down is to link to an anchor in the text and once selected will allow you to select from a list of anchor names on the page the anchor name that you just set. Similar to what we did with paragraphs and lines earlier, when inside of a link under styles there are a number of attractive button styles that you can use to create call to action items for your users within your page. To add a picture to your page place your cursor where on the document you would like the picture to appear. Often it'll be on its own new line. Then click the add image button in the first row of the CKEditor interface. Though due to a program issue they are not marked, there are three required fields when adding an image: the url, alternative text, and under the advanced tab, advisory title. To add the url, just like when we were adding links to documents, clicking browse server will bring up the file browser interface to allow you to choose an existing file or upload a new image to embed on the page. When you locate your file, just double click it to add the url. Alternative text or "alt text" is what will be read to the screen reader for visually impaired users when they come to the image in your document. In most cases this will be a brief description of the image. Accurate alt text is required for accessibility so please do not skip it. There are some occasions where it's appropriate to put something different than a description of the image into the alt text field. The first would be if your image is a link. You can link an image using the link tab within the image dialog. If an image is linked, then the alt text should have a description of the destination when it is clicked instead of the contents of the image. In some occasions a linked image might be right next to or right above a text link to the same destination, in these cases rather than the screen reader reading the same redundant link twice empty alt text should be used. Empty alt text can be achieved by entering a space in the alternative text field. Items with empty alt text are are considered not to exist by the screen reader and they are skipped. Empty alt text should also be used for images that are purely decorative, be careful with this term most images are not purely decorative. The advisory title is used as a tool tip when a mouse is hovered over an image and then also to create a visible caption underneath the image. This caption functionality is not available on extension county websites, there the advisory title is just for the tooltip. The advisory title can be found within the image dialog. To revisit the image dialog double-click the image. The advisory title field can be found and filled in under the advanced tab of the image dialog. To disable the caption function click hide image caption underneath the field. Continuing back on the image info tab of the image dialog. Image width and height are automatically set based on the pixel dimensions of the image you selected. However, very often this is too big for your page. If you adjust one smaller the other will follow proportionally, as long as the little black lock icon remains locked. One option to deal with image sizes, is to size images proportionally. To do this type the percentage of the content area you would like the width of your image to occupy in the width field including the percent symbol. For instance, in this case we will use "30%". Once you add a percent to one field the black icon will automatically unlock. Just delete the height so that the image can set that automatically. Proportional image sizes do not work properly if you are using the auto caption option. To use proportional images you need to check the hide image caption box under the advanced tab. At the bottom of the image properties dialog there is an option to set the image to align to the right or the left. This will allow text to wrap around the image in your document. If you wrap text in a bulleted or numbered list around an image you will see that the iterators go into the margins overlapping the image. This can be solved by clicking within the list and then selecting either numbers or bullets inside from the styles drop down in the CKEditor. To add a margin around your image double-click the image bringing back up the image properties dialog then add pixel-based widths to the h-space or horizontal space and v-space or vertical space fields. The embed media button is next to the image button and looks like a little film strip. This button will allow you to embed almost any content that is available for embedding online. However, any content located on our websites needs to be reviewed for accessibility. Most commonly this button is used to embed videos from YouTube or maps from Google Maps, outside of those items you should probably contact the help desk to make sure that what you want to embed meets OSU digital accessibility standards. To embed a YouTube video on your web page, visit the video you want to embed on YouTube and click the share option. Currently this is located below the video but google can change the location of these options anytime. Among the options in the share dialog will be "embed". Clicking embed will give you a block of HTML code copy this code to your clipboard. Return to the site that you are editing, back on the site you are editing give yourself a line where you want to put your video and then click the embed media button. This will bring up a single field for you to paste in the embed code that you got from YouTube. Click OK, a placeholder will appear on your page for the video. Saving and viewing your page will show the video in place and playing as expected. The digital accessibility policy requires all recorded video to include accurate captioning and a downloadable transcript. While YouTube will generate captions automatically for your video these are not considered accurate enough. You will need to go through the YouTube caption file and fix any incorrect or misspelled words. This file can also be useful in creating a transcript, you can replace the timestamps with speaker identifications, and annotate the file with any important visual details from the video. This transcript can be offered as a file on your website and then even linked to in the YouTube description. Embedding a map works almost the exact same way as a video does. Visit Google Maps and search for the location you wish to embed a map to. Click share and then click embed, and that will expose embed code that you can then copy and include in your site the exact same way you did for the YouTube video. It is recommended that you keep data tables on your pages as simple as possible. The software will allow you to merge cells and stack headings. However, to meet accessibility guidelines tables with complex headings require code in each cell to help screen reader users understand what headings apply to what data. CKEditor does not provide a way for you to add this code to your tables. Large and complex tables are also very hard to navigate for mobile users. If you have a large amount of data to represent consider offering a download of an excel file so users can browse the data in an alternative program if needed. You should only use tables to show tabular data and not to create page layouts. To make a table put your cursor on an empty line in your document and click the table icon, it is a grid of squares next to the embed media icon. Select the number of rows and the number of columns for your table. You can also set a width for your table. By default this is a pixel width however, just like images we can set a proportional width just by including the percentage sign in the field. Select whether the first row, first column, or both in your table are header fields. And then it is recommended but not required by the accessibility policy that you title your table by filling in the caption field below. Clicking ok will render your table on the page. Text in your table can be formatted and linked in the same way that other text has been formatted in the CKEditor anywhere else. You can even add images or bulleted lists to your table. Right clicking within your table will expose functions to insert rows or columns, delete rows or columns, or as mentioned above merge and split cells. You should be careful using the split and merge functions as mentioned above. Going into cell properties will allow you to set a cell width or height for a cell. However, there is a very deep algorithm in browsers for table dimension and this can result in some unpredictable results depending on how the rest of your content is in your table. Accordions are blocks of headlines that can be clicked to show expandable sections within. The accordion model in our current CFAES websites meets university accessibility policy for end users, but can be temperamental to work with in CKEditor. I am demonstrating creating an accordion here however, it's expected that in a significant portion of the time CKEditor will run into problems with them. If your accordion does not render as expected reach out to the help desk for help. Before we make our accordion we will want to know where it will exist in the structure of our page. Each expandable or section of our accordion is a headline, and we will need to know what level those headlines should be to preserve the headline structure of our page. In this case my accordion is in a section titled with a headline 2 so I know my accordion headings will be headline threes. The accordion will look the same way no matter what heading we choose this is purely for the structure of the pages and for those using assistive technology. After placing my cursor where I want my accordion to appear, I click the accordion button which is the last button of the first row in the CKEditor. Here, I select the number of sections for my accordion as well as whether I want multiple sections to be open at once. And finally, I select h3 as the format of my headline. To edit each headline click before the arrow at the beginning of the line you will need to use the arrow key on your keyboard to move forward to the beginning of the text and then hold shift and use the right hand arrow key to highlight the text of the title. You can now type in your new title to replace the headline of text. A mouse can be used to highlight the text in the content section and edit it accordingly. If you are just adding text to each accordion in the template you will likely not end up with any problems. Where CKEditor will have problems is when you have to go back and edit previously edited sections or add to previously edited blocks. On occasion, only the first line of the answer section will be visible in the rendered accordion. On those occasions contact the help desk and we can fix it. CKEditor fields will appear in most content types in CFAES Drupal 7 websites these fields operate the same way in all of these instances you can refer back to this video as you need to for reference. Detailed documentation for the CKEditor as well as modules such as the accordion are available on the web services website at web.cfaes.ohiohytonstate.edu.